logo
Published on

CI 환경에서 playwright 시각적 회귀 테스트로 코드 리뷰 효율화하기

Authors
  • avatar
    Name
    MJ
    Twitter

시각적 회귀 테스트란?

시각적 회귀 테스트(Visual Regression Test)는 코드의 변경이 화면에 어떤 영향을 미치는지 확인하기 위한 테스트 방법입니다.

프론트엔드는 코드 리뷰할 때에, 코드 영역의 변경이 시각적인 변경을 가져오는 경우를 많이 만나게 되는데요. 코드를 보고 시각적인 변경을 유추하기에는 정확하지 않고, 해당 브랜치로 체크아웃하고 storybook을 통해 확인하는 것은 번거롭습니다. 이런 문제를 해결하기 위해 시각적 회귀 테스트를 도입하면, 코드 변경으로 인한 시각적인 변경을 빠르게 확인할 수 있습니다. 또한, 사전에 정의된 스냅샷과 비교하여 변경된 부분을 확인할 수 있어, 스타일의 변경이 있는지 빠르게 파악할 수 있습니다. 특히, 디자인 시스템을 구축하고 있는 경우에는 사소한 변경이 프로덕트 전체의 디자인에 영향을 미칠 수 있기 때문에, 시각적 회귀 테스트를 도입하는 것이 좋은 것 같습니다.

이제 어떻게 warrr-ui에서 playwright를 이용해 시각적 회귀 테스트를 구축했는지 알아보겠습니다.

Playwright는 무엇인가요?

Playwright enables reliable end-to-end testing for modern web apps https://playwright.dev/

Playwright는 웹 앱의 end-to-end 테스트를 위한 라이브러리로, Puppeteer와 Selenium의 단점을 보완하고, 브라우저 간의 호환성을 테스트하기 위한 라이브러리입니다.

Puppeteer는 어떤 단점이 있어서 playwright를 사용하나요? 최근에 feconf 2024에서 백부석님께서 발표하신 쉽고 편리한 E2E 테스트 자동화를 꿈꾸며에서 좋은 내용이 있어 이미지로 공유합니다!

Puppeteer 단점

프론트엔드는 다양한 디바이스에서 동작하는 웹을 구축하는 것이 중요한데요. Playwright는 브라우저 간의 호환성을 테스트를 지원하여 Chromium, Firefox, WebKit 환경을 테스트할 수 있습니다.

Playwright를 이용한 시각적 회귀 테스트 구축하기

Playwright는 브라우저에서 웹 애플리케이션이 어떻게 동작하는지를 테스트하기 위한 도구이다 보니까 테스트 베드가 존재해야 합니다. 물론, 응용 웹 애플리케이션이라면 구축된 프로덕트 환경에서 테스트를 진행할 수 있지만, 디자인 시스템은 애플리케이션에 설치하기 직전까지는 확인할 수 있는 방법이 없습니다. 그래서, 디자인 시스템 환경에서 Playwright를 이용한 시각적 회귀 테스트를 구축하기 위해서는 Storybook과 같은 UI를 확인할 수 있는 환경이 필요합니다.

스토리북을 테스트 베드로 사용하기

시각적 회귀 테스트를 진행하기 위해 스냅샷을 생성하여야 하는데요. 스토리북이 실행되기 전에 스냅샷을 생성하면, 빈 화면이 캡처되는 문제가 존재합니다. 그래서, 스토리북이 실행된 후에 스냅샷을 생성하여야 하는데, 간단한 설정을 통해 해결할 수 있습니다.

// 컴포넌트를 테스트하기 전에 스토리북이 실행되기를 기다립니다.
await page.waitForSelector("body.sb-show-main:not(.sb-show-preparing-story)");
await page.waitForSelector("#storybook-root > *");~

Plarywright의 page 객체에는 waitForSelector 메서드가 존재하여, 해당 셀렉터가 나타날 때까지 기다릴 수 있습니다. 이후에는 이제 해당 컴포넌트의 스냅샷을 생성하면 됩니다.

await expect(page).toHaveScreenshot()

toHaveScreenshot 메서드는 Playwright에서 제공하는 메서드로, 해당 페이지의 스냅샷을 생성하고, 이전 스냅샷과 비교하여 변경된 부분을 확인할 수 있습니다. 스냅샷을 촬영하면, 설정한 경로에 다음과 같은 이미지 파일들이 생성됩니다.

스냅샷 이미지

이제 생성된 스냅샷을 기반으로 컴포넌트의 변경을 확인할 수 있습니다.

CI 환경에서 시각적 회귀 테스트 구축하기

지금까지는 로컬 환경에서의 시각적 회귀 테스트를 구축하는 방법을 알아보았습니다. 하지만, 개발자가 매번 컴포넌트 코드를 작성하고 스냅샷을 생성하는 것은 번거롭습니다. 그래서, CI 환경에서 시각적 회귀 테스트를 구축하여, 코드 변경 시에 자동으로 테스트를 진행하도록 설정할 수 있습니다.

CI 환경에서 Playwright 실행하기

공식 문서의 CI 환경 가이드

github actions를 이용하여 CI 환경에서 Playwright를 실행하는 방법은 다음과 같습니다.

Playwright는 기본적으로 headless 모드로 실행되기 때문에, CI 환경에서도 원활하게 동작합니다. https://playwright.dev/docs/test-use-options#other-options

Playwright CI 환경 이제 CI 환경에서 문제가 없다는 것을 알게 됐으니 action script를 작성해보겠습니다.
- name: Playwright 설치
  run: pnpm exec playwright install --with-deps

- name: 스토리북 빌드
  run: pnpm run build-storybook

- name: 스토리북 실행
  run: |
    pnpx serve -l 6006 packages/primitive/storybook-static &
    echo $! > .storybook-pid

- name: VRT 테스트 실행
    id: vrt-test
    run: pnpm run e2e

테스트를 실행하게 되면 스냅샷들이 생성되지만, CI 환경이 종료되면 스냅샷들이 사라지게 됩니다. 이를 방지하기 위해, 스냅샷을 저장할 수 있도록 Pull Request에 포함되도록 하겠습니다.

- name: 변경된 스냅샷 커밋 및 푸시
  run: |
    git config --local user.email "action@github.com"
    git config --local user.name "GitHub Action"
    git add .playwright
    git diff --staged --quiet || git commit -m "Update VRT snapshots in .playwright folder"
    git push origin HEAD:${{ github.head_ref }}

만일, PR에 포함하지 않고 따로 업로드하고 싶다면 artifact를 이용하여 저장할 수 있습니다.

- name: 테스트 결과 및 diff 이미지 업로드
  uses: actions/upload-artifact@v4
  with:
    name: vrt-results
    path: |
      playwright-report/
      .playwright/
    retention-days: 7

아티팩트 방식으로 코드리뷰를 진행하고 싶다면 PR Comment에 포함될 수 있도록 자동화할 수 있습니다.

- name: PR 코멘트 작성
  uses: actions/github-script@v6
  with:
    github-token: ${{secrets.GITHUB_TOKEN}}
    script: |
      github.rest.issues.createComment({
        issue_number: context.issue.number,
        owner: context.repo.owner,
        repo: context.repo.repo,
        body: '## VRT 테스트 성공\n\nVRT 테스트가 성공적으로 완료되었습니다. 자세한 내용은 첨부된 테스트 결과와 diff 이미지를 확인해주세요.\n\n[테스트 결과 확인](https://github.com/${{github.repository}}/actions/runs/${{github.run_id}})\n\n스냅샷 업데이트가 필요한 경우, PR에 "VRT" 레이블을 추가해주세요.'
      })
저는 pr에 포함하였기 때문에, pr 코멘트에 아티팩트 링크를 추가하지 않았습니다. 아래는 테스트가 성공했을 경우에 추가되는 PR 코멘트입니다. Playwright CI 환경
이제부터 PR에서 스냅샷을 통해 컴포넌트를 시각적으로 확인할 수 있게 되었습니다. 파일 체인지 예시

마치며

지금까지 Playwright를 이용한 시각적 회귀 테스트를 구축하는 방법을 알아보았습니다. Playwright를 이용하면, 코드 변경으로 인한 시각적인 변경을 빠르게 확인할 수 있고, CI 환경에서 자동으로 테스트를 진행할 수 있습니다. 이를 통해, 코드 리뷰에서 효과적으로 디자인 시스템의 변경을 빠르게 파악할 수 있습니다.

Playwright를 사용하면 e2e 테스트도 진행할 수 있습니다. 이렇게 Playwright를 이용하여 프론트엔드 테스트를 진행하면, 더욱 안정적인 웹 애플리케이션을 개발할 수 있는 개발 환경을 구축할 수 있습니다. 만일, 디자인 시스템 개발을 한다면 Playwright를 이용한 시각적 회귀 테스트를 도입하는 것을 추천합니다.

View on GitHub