Playwright을 활용한 비주얼 테스트: 스크린샷을 떠서 통채로 비교하기

Visual 테스트란? 

애플리케이션 화면을 스크린샷으로 저장하여, 앱의 현재 상태와 비교하는 것을 말한다.

E2E 테스트는 뷰의 동작을 검증한다면, Visual 테스트는 화면에 표시된 시각적인 부분을 검증한다. 

visual 테스트으로 수동 테스트 프로세스를 자동화하면, 브라우저 별로 데이터가 잘 뜨는지 매번 테스트를 하지 않아도 된다. 

Playwright이란? 

• Playwright을 사용하면 UI를 캡쳐한 이미지 결과를 비교할 수 있다.

 

Playwright 실습편 

(1) 프로젝트 폴더를 만든 후, 냅다 설치! 

# Install node dependencies
npm install -D @playwright/test
npm install -D typescript

# Install playwright browsers
npx playwright install

 

(2) spec 파일 만들기 

blog.spec.ts 파일을 생성한 후, 다음 코드를 추가했다.

import {test, expect} from '@playwright/test';

test('blog page visual test', async ({page}) => {
  await page.goto('https://americanopeople.tistory.com/451');
  await expect(page).toHaveScreenshot();
});

 

(3) 돌려! 

npx playwright test

처음 테스트를 돌릴 때는 이미지가 없어서 테스트에 실패한다.

 

(3-A. 실험결과) test-results 폴더에는 실패 결과 이미지가 남는다. 

 

(3-B. 실험결과) 화면에 오차가 발생했을 때, 뜨는 이미지는 다음과 같다. 

요렇게 에러가 발생하고.. 

 

diff 파일에 오차가 발생한 영역을 이미지로 남겨둔다. 따봉! 

블로그 게시글 제목을 바꿔서 테스트해봤다.

 

(4) HTML 형식의 테스트 결과 보고서 만들기  

npx playwright test --reporter html

위의 명령어를 실행하면, 실패 결과를 한눈에 볼 수 있는 보고서 페이지를 만들어준다. 짱~

 

(5) UI 모드로 테스트하기 

npx playwright test --ui

이런식으로 실행결과를 볼 수 있다. 애초에 UI 모드로 테스트하는게 보기 편할듯! 

Playwright 고급편

(1) 테스트 기준 유도리 있게 조정하기 

playwright은 이미지가 1px이라도 다르면 실패로 간주한다. 그러나 살짝~ 이미지가 다른 경우에는 그냥 넘어가고 싶을 수도 있다. 

필요한 경우, threshold, maxDiffPixels, maxDiffPixelRatio을 사용해서 조정해보자! 

test('blog page visual test', async ({page}) => {
  await page.goto('https://americanopeople.tistory.com/451');
  const $title = page.locator('main > title');

  await expect(page).toHaveScreenshot({
    maxDiffPixelRatio: 0.2,
  });

  await expect($title).toHaveScreenshot({
    maxDiffPixels: 50,
  });
});

(2) CI/CD 적용하기 

CI/CD를 사용하여 스크린샷의 변화를 기록하고, 회귀테스트 결과를 모니터링할 수도 있다.

자세한 내용은 원문을 살펴보자. 😊

https://www.browsercat.com/post/ultimate-guide-visual-testing-playwright#visual-testing-in-cicd

 

참고

• Ultimate Guide to Visual Testing with Playwright

Ultimate Guide to Visual Testing with Playwright

• Getting Started with Snapshot Tests in Playwright

Getting Started with Snapshot Tests in Playwright