Cypress를 사용하여 Canvas, D3.js 및 React로 빌드 된 게놈 그래프 테스트

다른 Feedzai 제품과 마찬가지로 Genome 은 설계 사양에 따라 작동하는지 확인하기 위해 철저한 E2E (end-to-end) 테스트를 거칩니다. Genome은 매우 시각적 인 도구이기 때문에 테스트에는 매우 특별한 접근 방식이 필요합니다. HTML 캔버스 요소를 사용하여 그래프 영역을 구축하므로 기존 E2E 기술을 사용할 수 없습니다.

이 블로그 게시물에서는 캔버스 요소에서 주요 상호 작용이 발생하는 애플리케이션을 테스트하는 문제에 어떻게 접근하고 해결했는지 설명합니다.

화이트 보드 테스트

기존의 웹 애플리케이션 테스트 ( "전통적인"는 각 정보가 HTML 요소를 사용하여 표시되는 사용자 인터페이스 (UI)를 의미 함)는 Selenium 또는 Cypress와 같은 현재 E2E 프레임 워크에서 다소 간단합니다. 전반적으로 워크 플로는 버튼을 클릭하거나 입력 요소에 텍스트를 입력하고 페이지가 원하는 상태가되었다고 주장하는 등 페이지에서 일련의 작업을 수행하는 것으로 구성됩니다 (예 : 일부 요소가 페이지에 존재한다고 주장).

이것은 canvas 요소를 제외한 거의 모든 HTML 요소에서 잘 작동합니다. 캔버스에 익숙하지 않은 경우 스크립팅을 통해 그래픽을 그리는 데 사용할 수있는 HTML 요소입니다. 무엇이든 자유롭게 그릴 수있는 화이트 보드라고 상상할 수 있습니다.

콘텐츠를 생성하기 위해 여러 요소를 서로 중첩 할 수있는 다른 HTML 요소 (DOM 트리)와 비교할 때 캔버스 요소에 표시되는 내용은 중첩 된 요소에 표시되지 않으므로 쿼리 가능한 DOM 트리를 생성하지 않습니다. 테스트 관점에서 캔버스 요소의 콘텐츠를 쿼리 할 수없는 경우 애플리케이션이 원하는 상태가된다고 어떻게 주장 할 수 있습니까? 예를 들어 그래프에서 노드를 삭제 한 후 n — 1 개의 노드를 얻는다는 것을 어떻게 테스트 할 수 있습니까?

API 노출

Genome에 대한 E2E 테스트를 구현 한 방법을 설명하기 전에 Genome, 특히 그래프가 어떻게 구축되는지에 대한 약간의 컨텍스트를 제공하는 것이 중요합니다.

Genome의 그래프는 React와 D3.js의 조합을 사용하여 작성됩니다. GenomeGraph 라는 React 구성 요소 는 캔버스 요소를 포함합니다. 전반적으로이 구성 요소는 그래프를 대상으로하는 사용자 이벤트를 설정하고 처리합니다. 또한 D3.js와 통신하여 노드 및 에지 위치를 계산합니다.

D3.js는 시각화 도구를 빌드하는 데 사용되는 잘 알려진 라이브러리입니다. Genome에서는 기본적으로 D3.js force-directed 그래프 레이아웃을 사용합니다. 이 레이아웃은 균형을 잡을 때까지 노드에 대한 물리적 힘을 시뮬레이션합니다 (최종 위치). 시각적으로 말하면 시뮬레이션이 많을수록 노드가 서로 더 많이 분리되는 경향이 있지만 시뮬레이션이 적을수록 서로 더 가깝게 유지 될 수 있습니다. 그림 1은 시뮬레이션 수가 그림 2보다 많은 시나리오를 보여줍니다.

그림 1. 약 300 회 반복되는 D3.js 힘 시뮬레이션. 설명했듯이이 경우 노드는 그림 2의 그래프와 비교할 때 서로 약간 떨어져 있습니다.
그림 2. 약 13 회 반복되는 D3.js 힘 시뮬레이션.

셀레늄에 싸이프레스

우리는 Cypress를 사용하여 E2E 테스트를 구현하기로 결정했습니다. 왜 셀레늄이 아닌 Cypress입니까? Cypress는 모든 Frontend 개발자가 JavaScript를 사용하여 E2E 테스트를 쉽게 구현할 수 있다는 점에서 개발자 중심적입니다. 또 다른 장점은 Selenium WebDriver가 브라우저 외부에서 원격으로 실행되는 경우 Cypress가 정반대라는 점입니다. 브라우저 내에서 실행됩니다. 브라우저 내에서 코드를 실행하는 기능은 작업을 단순화합니다. 예를 들어, 디버거를 애플리케이션 또는 사양 코드에 간단히 놓을 수 있습니다. 이는 개발 중에 개발자 도구를 매우 쉽게 사용할 수 있도록합니다. 기술적 인 측면 외에도 우리가 결정을 내렸을 때 Cypress는 Frontend 커뮤니티에서 많은 관심을 받고있었습니다. 이 모든 것을 고려하여 Cypress를 사용해보기로 결정했습니다 (지금까지 후회하지 않음).

이제 Genome 그래프를 구현하고 테스트하는 데 사용되는 도구에 대해 더 많은 컨텍스트를 얻었으므로 캔버스 요소에 그려진 그래프를 테스트 할 수 있었던 방법을 자세히 설명해야합니다.

캔버스 요소에 그려진 그래프를 테스트하는 방법

몇 가지 분석 후 API를 사용하여 Cypress 애플리케이션에서 사용할 Genome 애플리케이션을 노출하기로 결정했습니다. 이를 통해 그래프를 조작하고 그 상태를 주장 할 수있었습니다. GenomeGraph 구성 요소 의 특성으로 인해 API를 구축하는 데 사용하는 것은 "자연스러운"선택이었습니다.

HOC (High-Order Component)는 컴포넌트 로직을 재사용하기위한 React의 고급 기술입니다. 이 기술은 주어진 구성 요소에서 향상된 구성 요소를 생성하기 때문에 사용했습니다. 특히 GenomeGraph 구성 요소에서 API를 생성하고 브라우저의 전역 개체에 노출 할 수 있는 향상된 구성 요소 를 생성했습니다. 재사용 할 수는 없지만이 접근 방식은 구성 요소의 API를 노출하는 가장 깨끗하고 우아한 방법으로 보였습니다.

이 API가 프로덕션 환경에 노출되는 것을 원하지 않았기 때문에 테스트 환경에서만 사용할 수 있도록 변수를 정의했습니다.

API가 노출하는 작업 집합에서 가장 유용한 작업 은 waitUntilGraphSimulationEnd 작업입니다. 그래프와 상호 작용을 시작하기 위해 D3.js 시뮬레이션이 완료 될 때까지 기다릴 수 있습니다. 이것이 없으면 그래프와 상호 작용하기가 매우 어려우며 그래프가 초기 상태에서 최종 상태로 "이동"하기 때문에 불안정한 테스트로 이어질 수 있습니다.

아래 스 니펫은 시뮬레이션이 끝날 때까지 기다리는 함수의 구현을 설명합니다.

사용자 지정 명령 구현

Cypress 애플리케이션의 관점에서 Genome 그래프와의 통신을 추상화하기 위해 몇 가지 사용자 지정 명령을 만들었습니다. 아래 스 니펫은 getGraphNodeInformationByIdwaitUntilGraphSimulationEnd 사용자 정의 명령 의 구현을 설명 합니다.

테스트를 구현하는 동안 사용자 지정 명령을 마치 Cypress 라이브러리의 일부인 것처럼 사용합니다. 아래의 예는 특정 노드를 클릭하면 해당 노드가 선택된다는 것을 확인하는 테스트입니다. 앞서 언급 한 waitUntilGraphSimulationEndgetGraphNodeInformationById 사용자 지정 명령 의 사용법을 확인할 수 있습니다 .

마지막 생각들

Cypress 애플리케이션과 Genome 애플리케이션 간의 "직접 통신"을 기반으로 한 접근 방식을 채택하여 E2E 테스트 세트에 주요 구성 요소 (Genome 그래프)를 포함 할 수있었습니다. 그러나 우리는이 접근 방식의 단점을 알고 있습니다.

E2E 테스트의 목표 중 하나는 사용자가 화면을 클릭하고 텍스트를 입력하고 화면에서 변경 사항을 확인하는 것처럼 애플리케이션과 상호 작용하는 것입니다. API 기반 접근 방식을 사용함으로써 우리는이 목표를 어떻게 든 깨뜨릴 수 있습니다. 실제로 Genome 애플리케이션에서 직접 코드를 호출하여 그래프와의 상호 작용을 가짜로 만듭니다.

또 다른 제한은 끌어서 놓기 작업입니다. 현재는 노드를 화면의 일부로 드래그하는 시나리오를 테스트 할 수 없습니다. 테스트에서 결함이 있음을 발견했기 때문입니다. 이 한계를 극복하기위한 솔루션을 연구하는 동안 드래그 앤 드롭 작업을 다루기 위해 일련의 수동 테스트가 추가되었습니다.

기능 테스트의 대안 인 시각적 테스트는 가까운 장래에 탐색해야하는 접근 방식입니다. 이 기술은 애플리케이션의 이미지 스냅 샷을 찍고 이전에 승인 된 기준 이미지와 비교합니다. 주로 시각화를 통해 정보를 인코딩하는 기능에 잘 맞는 기술입니다. 예를 들어, Genome에는 노드와 가장자리에 서로 다른 색상을 적용하여 특정 정보를 인코딩하는 것을 목표로하는 Lenses라는 새로운 기능이 있습니다. 예를 들어, 적어도 하나의 사기 거래에 참여한 엔티티는 빨간색으로 표시되고 엔티티에만 참여하는 엔티티는 정품 거래는 녹색으로 표시됩니다. 이미지 스냅 샷을 기준 이미지와 비교하는 것은 렌즈가 노드와 가장자리에 올바르게 적용되었는지 확인하는 흥미로운 방법입니다.

주로 캔버스를 사용하여 빌드 된 애플리케이션을 테스트하는 우리의 솔루션은 완벽하지 않으며 현재의 한계를 해결하기 위해 지속적으로 반복하는 것이 목표입니다.

참고 :이 솔루션에 대한 크레딧은 Liliana FernandesVictor Fernandes에게 있습니다. 나는 메신저 일 뿐이다 : D

Suggested posts

서버 측 렌더링과 클라이언트 측 렌더링

서버 측 렌더링과 클라이언트 측 렌더링

당신은 몇 살입니까? 인터넷이 정적이고 비 동적이며 부실했던 때를 기억한다면 대답은 좋은 지표가 될 것입니다. 제가 90 년대에 어렸을 때 인터넷은 정보와 많은 상호 작용을 허용하는 대신 정보를 보여줄 수있었습니다.

JavaScript 테스트의 기초

JavaScript 테스트의 기초

"잠깐만 요, JavaScript 테스팅에 대한 또 다른 기사"라고 생각할 수 있습니다. 예, JavaScript 테스트의 기본 사항에 대해 더 많이 이야기하고 싶은 이유는이 주제에 대한 많은 기사가 JavaScript 테스트를 작성하기위한 코드 스 니펫과 도구를 보여줌으로써 매우 유사한 방식으로 작성 되었기 때문입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.