Visual Regression Test - Chromatic (1/2)

Chromatic 이란?

Chromatic은 Storybook을 개발한 기업이 만든 Visual Regression Test 도구입니다.
Storybook을 테스트 베드 (Test Bed) 로 활용하기 때문에, Storybook 중심 개발 워크플로우를 가진 팀에 가장 적합합니다.

Chromatic 주요 특징

• 빠른 테스트 속도
  병렬로 테스트를 실행하여 대규모 컴포넌트 라이브러리에서도 높은 효율성을 제공합니다.

• 시각적 리그레션 테스트
  변경된 UI의 스크린샷을 Chromatic 대시보드에서 명확히 시각화하여 보여줍니다.
  이를 통해 변경 사항을 쉽게 파악하고 Approve 또는 Deny 등의 리뷰 작업을 간편하게 수행할 수 있습니다.

• 팀 협업 지원
  UI 변경 사항을 기반으로 팀원들과 효과적인 코드 리뷰 및 협업이 가능합니다.

Free Plan 조건

하지만 Chromatic 은 유료 라이브러리 입니다.
Free Plan을 통해 한 달에 최대 5000개의 Snapshot을 테스트할 수 있지만
Snapshot 제한은 빠르게 소진될 수 있으므로 대규모 프로젝트에서는 유료 플랜을 고려해야 합니다.

Chromatic 설치

이제, Chromatic을 설치하고 빌드 및 테스트를 진행하는 방법을 아래와 같이 단계별로 소개해볼까 합니다.

Chromatic 패키지 설치

Chormaitc 을 패키지 development dependency로 설치합니다.

npm install --save-dev chromatic

프로젝트 설정

패키지가 설치되면 Github 계정으로 Chromatic 로그인하고,
로그인하면, Chromatic Project Token 을 주는데 Package.json 에 다음 처럼 명령어를 추가하여 명령어를 통해 chromatic 을 실행할 수 있도록 설정합니다.

• build-storybook : storybook-static 이라는 폴더에 빌드 된 정적 HTML/CSS/JS 파일들이 생성합니다.
• chormaitc: chromatic 명령어는 Chromatic 서비스로 Storybook을 업로드하여 UI 테스트 및 시각적 리그레션 테스트를 수행하는 데 사용합니다.

scripts": {
    ...
    "build-storybook": "storybook build --config-dir=libs/storybook-host/.storybook", 
    "chromatic": "chromatic --project-token=input_your_chromatic_token --config-dir=libs/storybook-host"
}

테스트 실행

아래 명령어로 Chromatic 테스트를 실행합니다.

npm run chromatic

Chromatic 대시보드 확인

Chromatic 대시보드에서 빌드 내역과 테스트 결과를 확인할 수 있습니다.
빌드된 Storybook과 변경된 UI를 대시보드에서 시각적으로 비교할 수 있습니다.

Chromatic 사용하기

Chormaitc 에 접속하면, 다음과 같이 Biuld 한 내역을 확인할 수 있습니다.

Build 60번 같은 경우는 77개의 Component 를 Build 하고, 239개의 Story 를 테스트했으며
그 중에 변경사항은 0개라고 나오네요.

다음, 변경사항 반영된 것을 테스트를 위해 Skeleton UI component 코드를 width: 100% 에서 wdith: 100px 로 수정해봤습니다.

다시 테스트 실행을 위한 명령어를 쳐준 뒤 Build 내역에서 다음 Build 인 Build 62번을 보면
변경사항이 2개 있음을 확인할 수 있습니다.

Build 62를 클릭해서 들어가보면, 상세 정보를 볼 수 있습니다.
Skeleton Component 중 Basic 과 Line Story 에 변경사항이 생겼다는걸 알 수 있습니다.

그리고 Basic Story 를 클릭해 보면,
다음과 같이 변경된 사항을 형광 초록색으로 하이라이팅해서 보여주고 하단에 어떤 코드가 변경되었는지도 함께 볼 수 있도록 ]대시보드가 구성되어있습니다.

다음은 Line Story 변경사항 입니다.

이렇게, Chormaitc 은 Skeleton Component 를 변경했을 때 어떤 UI 일 때 변경점이 발생하는지, 그리고 어떻게 변경되었는지 확인하기 쉽도록 제공해줍니다.

여기서 잠깐! Chromatic 사용 시 유의사항!
변경사항을 확인하기 위해서는 항상 Commit 후에 Test 명령어를 실행해야 합니다.
변경사항을 Commit하지 않으면, 변경되지 않은 상태로 테스트가 실행되어 변경점이 반영되지 않는 문제가 발생할 수 있습니다.

결론

다음에는 Chromatic을 Storybook Addon으로 설치하고, Storybook UI에서 Chromatic을 직접 빌드 및 확인하는 방법을 준비 중입니다.
또한, 특정 Story를 Chromatic 테스트에서 제외시키는 방법도 준비해서 소개해보겠습니다.