Cypress 및 Percy를 사용하여 Agile UI 변경에서 스스로를 돕는 방법

모든 것은 QA 멤버인 저와 함께 매일 지속적이고 동적인 변화가 있는 전체 애자일 워크플로가 포함된 프로젝트에 할당되면서 시작되었습니다. 그래서 전체 페이지 생성 및 리팩터링에서 작은 패딩 또는 텍스트 글꼴 변경에 이르기까지 매일 UI 변경 사항을 테스트합니다. 자동화 테스터로서 저는 기능 자동화를 위해 Cypress를 사용합니다. 그래서 저는 특히 제 삶을 더 쉽게 만들기 위해 Cypress 플러그인과 UI용 확장을 조사하기 시작했습니다... 그리고 Percy는 이 분야에서 완벽하게 작동합니다.

Percy는 실제 Cypress 테스트로 라우팅된 페이지의 모든 콘텐츠에 대한 스냅샷을 찍어 웹에 저장하므로 내 스냅샷의 위치와 저장 공간에 신경 쓸 필요가 없습니다. Percy는 처음으로 테스트를 실행할 때 모든 스냅샷을 저장하고 이후에는 현재 촬영된 스냅샷을 마지막 스냅샷과 비교하고 변경 사항을 가리키므로 작은 세부 사항을 쉽게 볼 수 있습니다.

이 솔루션이 저에게 잘 맞는다는 것을 알았으므로 작은 세부 사항을 놓치지 않고 읽기 쉬운 변경 로그 및 시각적 변경 사항으로 UI 테스트를 쉽게 시작할 수 있도록 단계를 제공하겠습니다.

먼저 Percy에서 무료 계정을 만들어야 합니다.
완료한 후 Percy는 테스트를 실행하기 전에 구성에서 나중에 사용되는 PERCY_TOKEN을 제공합니다.

Cypress가 설치된 선호하는 코드 편집기의 열린 프로젝트에서 percy-cypress을 설치해야 합니다.

npm install --save-dev @percy/cypress

스냅샷 명령에 액세스할 수 있도록 명령에서 패키지를 가져옵니다.

// At the top of cypress/support/commands.js
import '@percy/cypress';

필요한 플러그인에 percyHealthCheck가 필요합니다.

// In cypress/plugins/index.js
let percyHealthCheck = require('@percy/cypress/task')

module.exports = (on, config) => {
  on("task", percyHealthCheck);
};

이제 테스트에서 Percy 명령을 사용할 수 있습니다.

// Take a snapshot for visual diffing
    cy.percySnapshot();

테스트에서 "it"섹션당 하나의 percySnapshot을 다음과 같이 페이지별로 구분하여 사용합니다.

    it('Loads the AboutUs', function() {
        // Visit specific page
        cy.visit("https://website.com/about");

        // Take a snapshot for visual diffing
        cy.percySnapshot("AboutUs");
    });
    it('Loads the HomePage', function() {
        // Visit specific page
        cy.visit("https://website.com");

        // Take a snapshot for visual diffing
        cy.percySnapshot("HomePage");
    });
    it('Loads the ContactUs', function() {
        // Visit specific page
        cy.visit("https://website.com/contact");

        // Take a snapshot for visual diffing
        cy.percySnapshot("ContactUs");
    });

이제 언급된 PERCY_TOKEN 환경 변수를 설정할 시간입니다.

# Windows
$ set PERCY_TOKEN=<your token here>

# Unix 
$ export PERCY_TOKEN=<your token here>

테스트 실행:

percy exec -- cypress run

테스트를 처음 실행하면 스냅샷이 초기화되고 웹 앱에서 볼 수 있습니다.
테스트를 한 번 더 실행하면 Percy 웹 앱에 대한 모든 테스트 실행 목록이 표시되며 다음과 같이 표시됩니다.



스냅샷을 비교한 후 일부 변경 사항이 감지되면 이러한 변경 사항을 시각적으로 확인하고 예상 또는 실수인지 판단하여 버그로 보고할 수 있습니다.

시각적 UI 비교는 다음과 같습니다.


이전 상태의 스냅샷을 가지고 웹 페이지의 실제 상태와 비교하면 UI 요소를 렌더링할 때 발생할 수 있는 모든 작은 세부 정보와 버그를 놓치지 않는 데 정말 도움이 됩니다. 특히 Percy의 시각적 부분에서 명확하게 빨간색으로 굵게 표시된 변경 사항을 참조하십시오. 이제 개발자가 테스트 환경에서 모든 변경 사항을 푸시한 후 웹의 모든 페이지에 대해 매일 테스트를 실행합니다.

다른 무료 오픈 소스 솔루션이 있지만 대부분 버그가 있는 것으로 나타났습니다. 현재로서는 월 5000개의 스크린샷이 있는 Percy의 무료 버전이 저에게 적합합니다.