Cypress와 Percy를 사용한 시각적 회귀 테스트: 종합 가이드

소개

시각적 회귀 테스트는 웹 애플리케이션이 시간이 지나도 시각적 무결성을 유지하는지 확인하는 데 필수적인 부분입니다. 애플리케이션이 발전함에 따라 의도하지 않은 시각적 변화가 발생하여 잠재적으로 사용자 경험에 영향을 미칠 수 있습니다. 강력한 시각적 테스트 도구인 Percy와 Cypress를 결합하면 시각적 회귀 테스트를 원활하게 자동화할 수 있습니다. 이 게시물에서는 Cypress와 Percy를 설정하고 사용하여 웹 애플리케이션의 시각적 불일치를 파악하는 방법을 살펴보겠습니다.

시각적 회귀 테스트가 중요한 이유

1. 사용자 경험: UI 변경이 사용자 경험에 부정적인 영향을 미치지 않도록 합니다.
2. 일관성: 다양한 릴리스와 환경에서 시각적 일관성을 유지합니다.
3. 조기 감지: 개발 과정 초기에 의도하지 않은 시각적 변화를 감지합니다.
4. 자동화된 워크플로: 지속적인 시각적 테스트를 위해 CI/CD 파이프라인에 통합됩니다.

Cypress와 Percy 시작하기

Cypress와 Percy를 사용하여 시각적 회귀 테스트를 시작하려면 다음 단계를 따르세요.

1단계: Cypress 및 Percy 설치
먼저 프로젝트에 Cypress가 설치되어 있는지 확인하세요. 그렇지 않은 경우 다음 명령을 사용하여 설치할 수 있습니다.

npm install cypress --save-dev

다음으로 Percy CLI와 @percy/cypress 패키지를 설치합니다.

npm install --save-dev @percy/cli @percy/cypress

2단계: Percy 구성
Percy 대시보드에서 Percy 프로젝트를 생성합니다. 일단 생성되면 Percy 프로젝트 토큰을 받게 됩니다. 이 토큰을 환경 변수로 설정하세요.

export PERCY_TOKEN=<your_percy_project_token>

3단계: Percy와 Cypress 통합
cypress/support/index.js 파일에 다음 줄을 추가하여 Percy를 가져옵니다.

import '@percy/cypress';

이렇게 하면 Cypress에 Percy 명령이 추가되어 테스트 중에 시각적 스냅샷을 찍을 수 있습니다.

시각적 회귀 테스트 작성

Cypress와 Percy를 사용하여 시각적 회귀 테스트를 작성해 보겠습니다. 웹페이지의 시각적 스냅샷을 캡처하는 간단한 테스트부터 시작하겠습니다.

예: 시각적 스냅샷 캡처
cypress/e2e 디렉터리에 Visual-regression.spec.js와 같은 새 테스트 파일을 만들고 다음 코드를 추가합니다.

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it('should capture a visual snapshot of the homepage', () => {
        cy.percySnapshot('Homepage');
    });
});

이 테스트의 내용:

• cy.visit('/'): 애플리케이션의 루트 URL로 이동합니다.
• cy.percySnapshot('Homepage'): 페이지의 시각적 스냅샷을 캡처하고 이름을 "Homepage"로 지정합니다.

예: 특정 구성 요소 테스트
페이지의 특정 구성 요소나 섹션에 대한 시각적 스냅샷을 캡처할 수도 있습니다. 예를 들어 로그인 양식의 스냅샷을 캡처해 보겠습니다.

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should capture a visual snapshot of the login form', () => {
        cy.get('.login-form').percySnapshot('Login Form');
    });
});

이 테스트의 내용:

• cy.visit('/login'): 로그인 페이지로 이동합니다.
• cy.get('.login-form'): 로그인 양식 요소를 선택합니다.
• cy.percySnapshot('Login Form'): 로그인 양식의 시각적 스냅샷을 캡처합니다.

고급 시각적 회귀 테스트

다른 상태의 스냅샷 캡처
사용자 상호 작용 후와 같이 다양한 상태에서 애플리케이션의 스냅샷을 캡처할 수 있습니다.

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should capture visual snapshots in different states', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.percySnapshot('Login Form - Filled');

        cy.get('button[type="submit"]').click();
        cy.percySnapshot('Dashboard');
    });
});

이 테스트의 내용:

• 로그인 양식을 작성한 후 스냅샷을 캡처합니다.
• 로그인 후 대시보드의 또 다른 스냅샷을 캡처합니다.

시각적 회귀 테스트 실행

시각적 회귀 테스트를 실행하려면 다음 명령을 사용하세요.

npx percy exec -- cypress run

이 명령은 Percy와 함께 Cypress 테스트를 실행하여 시각적 스냅샷을 캡처하고 비교합니다.

시각적 변화 검토

Percy는 테스트를 실행한 후 시각적 변경 사항을 검토할 수 있는 Percy 대시보드에 스냅샷을 업로드합니다. 대시보드는 새 스냅샷과 기본 이미지 간의 차이점을 강조 표시하므로 변경 사항을 승인하거나 거부할 수 있습니다.

시각적 회귀 테스트 모범 사례

1. 시각적 요소 분리: 분리된 구성요소나 섹션의 스냅샷을 캡처하여 시각적 변화를 더욱 효과적으로 찾아냅니다.
2. 설명이 포함된 스냅샷 이름 사용: 스냅샷을 설명하는 이름을 사용하면 스냅샷을 더 쉽게 식별하고 검토할 수 있습니다.
3. CI/CD와 통합: CI/CD 파이프라인에 시각적 회귀 테스트를 추가하여 배포할 때마다 시각적 변경 사항을 자동으로 포착합니다.
4. 정기적으로 변경 사항 검토: Percy 대시보드에서 변경 사항을 정기적으로 검토하고 승인하여 정확한 시각적 기준을 유지합니다.

결론

Cypress 및 Percy를 사용한 시각적 회귀 테스트는 웹 애플리케이션이 시간이 지나도 시각적 무결성을 유지하는지 확인하는 강력한 방법입니다. 시각적 테스트를 워크플로에 통합하면 의도하지 않은 시각적 변화를 조기에 감지하고 해결할 수 있어 일관되고 세련된 사용자 경험을 제공할 수 있습니다. 프로젝트에서 시각적 회귀 테스트를 설정하고 활용하려면 이 가이드에 설명된 단계와 모범 사례를 따르세요.

즐거운 테스트를 해보세요!

위 내용은 Cypress와 Percy를 사용한 시각적 회귀 테스트: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!