Visual Regression Test - Chromatic (2/2)

hellog·2025년 1월 15일

UI VRT Visual Regression Test chromatic developer frontend storybook

Visual Regression Test

목록 보기

3/3

이전 글에서 Chormaitc 은 Storybook 을 통해 Visual Regression Test 를 하면 더 강력하다는 말을 언급한적이 있습니다.
그래서 이번 글에서는 Chromatic을 Storybook Addon으로 설치하고, 이를 통해 Visual Test를 실행하며 효율적으로 변경사항을 관리하는 방법을 소개할까 합니다.

Chromatic Storybook Addon 설치

Addon 설치

npx storybook@latest add @chromatic-com/storybook

Storybook 설정 추가

storybook-host/.storybook/main.ts 파일에 Addon을 추가합니다.

const config: StorybookConfig = {
  stories: [
    '../../**/src/lib/**/*.mdx',
    '../../**/ui/**/src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
    '../../**/src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
  ],
 
  addons: [
    ...
    '@chromatic-com/storybook',
  ],
 ...

Storybook 실행

npx nx run storybook-host:storybook

Stroybook 접속

Storybook 접속 Storybook 실행 후, Visual Test 버튼과 Visual Test 탭이 Storybook Inspector 에 추가된 것을 확인합니다.

Storybook Inspector 의 Visual test 탭을 선택하면 Chromatic 로그인이 요구되며,
로그인하면 storybook-host/.storybook 에 chromatic.config.json 가 추가가 됩니다.
Chromatic이 스토리북과의 연결 정보를 관리하고, 실행 시 사용한 설정을 재사용할 수 있도록 하기 위해 추가됩니다.

{
  "onlyChanged": true,
  "projectId": "Project:673d96b8de08fc8955f2f60b",
  "storybookBaseDir": "libs\\storybook-host",
  "zip": true
}

Chromatic Storybook Addon 사용하기

변경된 Story 확인:

Storybook 카테고리에서 변경된 Story의 타이틀 옆에 노란색 배지가 표시됩니다.
그리고 하단의 변경 사항을 클릭하면 필터링된 Story를 쉽게 확인할 수 있습니다.

Visual Test 탭:

변경된 UI의 스크린샷을 확인하며, 변경된 부분만 형광색으로 하이라이트됩니다.
이로써 Chromatic 대시보드 없이도 Storybook Inspector에서 UI 변경 사항을 바로 비교 가능합니다.

Code Review:

Storybook을 통해 UI 변경 사항에 대해 직접 코드 리뷰를 진행할 수 있습니다.

Snapshot 비용 절약하기

Chormaitc 을 설정하고 Chromaitc 대쉬보드와 Storybook 에 연동하였을 때 사용법을 훑어보니
Chormatic 의 매력을 물씬 느낄 수 있었습니다.
하지만, 이저 글에서 말씀드렸다싶이 이렇게 편리한 Chromatic 은 유료 툴이라는거죠...

그래서 Shanpshot 비용을 절약하기 위해 무엇을 할 수 있을까 검토해보았습니다.

Test에서 특정 Story 제외

테스트가 불필요한 Story를 제외하려면 parameters 에 다음과 같이 추가합니다.

export default {
  title: 'Button',
  parameters: {
    chromatic: { disableSnapshot: true }, // Chromatic 에서 제외
  },
};

특정 영역 제외

테스트가 필요한 Story 이지만 특정 부분의 변경점을 테스트할 필요가 없을 경우는 다음과 같이 parameters 에 ignoreSelector 를 써서 특정 부분을 제외할 수 있습니다.

parameters: {
    chromatic: { ignoreSelector: ['td > div.ignore-test-box'] },
  },

--only-changed 옵션 사용

변경 사항이 있을 때만 빌드 및 테스트를 실행하도록 명령어를 설정합니다.

chromatic --only-changed --project-token=chpt_cdfd2817443bcc2 --config-dir=libs/storybook-host

결론

Chromatic Storybook Addon은 Visual Regression Test를 Storybook 환경에서 손쉽게 실행할 수 있도록 지원하며, UI 변경 사항을 효율적으로 관리할 수 있습니다.
Snapshot 비용을 절약하기 위해 불필요한 Story나 특정 영역을 제외하고, 변경 사항이 있을 때만 테스트를 실행하는 설정을 활용하면 좋을 것 같습니다.

다음 글에서는 BrowserStack의 Percy를 소개할 예정입니다.
Percy와 Chromatic의 차이점과 활용법도 함께 다룰 예정이니 기대해 주세요! 🚀

hellog

이전 포스트

Visual Regression Test - Chromatic (2/2)