시각적 회귀 테스트

JeongSeulho

2024년 01월 20일

0. 들어가며

시각적 회귀 테스트의 정의와 Chromatic을 이용한 시각적 회귀 테스트 방법에 대하여 정리

1. 시각적 회귀 테스트란?

기존의 스냅샷 테스트에서 스냅샷이 문자열이 아닌 이미지로 저장되어 테스트를 진행하는 방법
Chromatic과 같은 도구를 사용하면 다음과 같은 장점이 있다

일관된 환경에서 스냅샷을 찍을 수 있음
AI 기반 비교 알고리즘으로 사용자 관점에서의 변경 사항을 찾아줌
브라우저 마다 다른 렌더링 결과를 확인할 수 있음
수정사항에 따른 히스토리를 확인할 수 있음

2. Chromatic 시작하기

(1) Storybook 연동

먼저 Chromatic 페이지에서 로그인 이후 GitHub 프로젝트와 연동, 제공해주는 명령어를 작성한다.
이러면 Chromatic에서 Storybook의 스토리를 기반으로 하여 기본적인 스냅샷이 저장되고, 이후 변경사항이 발생하면 Chromatic에서 변경사항을 확인할 수 있다.

(2) 커밋 후 스냅샷 확인

변경사항이 발생하고 커밋하고 Chromatic 배포 명령어를 진행하면 나에게 제공된 Chromatic 페이지에서 변경사항을 확인할 수 있다.
이때 Chromatic 배포 명령어는 내부적으로 Storybook을 빌드, 스냅샷을 찍고 Chromatic 페이지에 업로드하는 과정을 거친다.

3. Chromatic CI

(1) PR 생성시 Chromatic 실행

copy

# .github/workflows/chromatic.yml
name: 'chromatic test'
on: pull_request
jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v3
        with:
          node-version: 19
      - name: Install dependencies
        run: npm ci
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # https://www.chromatic.com/docs/github-actions/
          onlyChanged: true # https://www.chromatic.com/docs/turbosnap/#turbosnap

(2) PR 생성 및 UI 변경 시

UI Tests:의 Details를 클릭하면 Chromatic 페이지로 이동하여 변경사항을 확인할 수 있고 스냅샷을 변경할지 여부를 결정
팀원의 PR를 확인할 때도 UI Review:의 Details을 클릭하여 Chromatic 페이지로 이동하여 변경사항을 확인하고 PR을 수락할지 여부를 결정

(3) Chromatic으로 배포된 Storybook 확인

Chromatic 페이지에서 스토리북을 로컬이 아닌 배포된 스토리북을 확인할 수 있다, 브랜치별로도 확인 가능하다.

4. 시각적 회귀 테스트의 한계

테스트 실패의 원인이 여러가지이며 파악하기 힘듬
테스트가 오래 걸리고 로컬에서 테스트가 불가능함, 피드백이 느림

이러한 한계로 CI 연동이 필수이며, 특정 시점에서만 테스트가 실행되도록 설정하는 것이 좋다.

Test