Storybook용 Percy 및 Chromatic

퍼시는 지속적 통합 파이프라인과 통합되는 클라우드 기반 VRT 플랫폼입니다. 웹 페이지와 스토리북 스토리의 스크린샷을 캡처하고, 기준 이미지를 클라우드에 저장하며, 웹 사용자 인터페이스에서 확인할 수 있는 시각적 차이 검토를 생성합니다. Playwright, Cypress, Selenium 및 스토리북을 지원합니다.

크로매틱은 스토리북을 위해 특별히 제작된 VRT 플랫폼입니다. 클라우드 브라우저에서 모든 스토리를 캡처하고 기준 이미지와 비교하여 차이 검토 사용자 인터페이스를 생성합니다. 또한 크로매틱은 호스팅되는 컴포넌트 문서 사이트로 스토리북을 게시합니다.

퍼시와 크로매틱은 모든 스토리북 스토리를 자동으로 찾아 스냅샷을 생성합니다. 추가 테스트 코드는 필요하지 않습니다. 컴포넌트의 스토리를 작성하고 명령줄 인터페이스를 실행하면 모든 시각적 상태가 자동으로 테스트됩니다. 따라서 기존 스토리북 프로젝트에 빠르게 도입할 수 있습니다.

@percy/cli와 @percy/storybook을 설치하고, 지속적 통합 환경에 PERCY_TOKEN 환경 변수를 추가한 다음, 지속적 통합 파이프라인에 percy storybook ./storybook-static을 추가합니다. 퍼시는 모든 스토리의 스냅샷을 생성하고 퍼시 대시보드에 VRT 빌드를 자동으로 게시합니다.

chromatic을 설치하고, 지속적 통합 환경에 CHROMATIC_PROJECT_TOKEN을 추가한 다음 chromatic --project-token=...을 실행합니다. 첫 번째 실행에서 기준 이미지가 설정됩니다. 이후 실행에서는 기준 이미지와 비교하고 검토 링크를 GitHub PR 검사에 게시합니다.

두 도구 모두 "X changes detected."라는 메시지를 표시하는 PR 검사를 추가합니다. 이를 클릭하면 나란히 보기 또는 오버레이 차이를 제공하는 검토 사용자 인터페이스가 열립니다. 검토자는 의도한 변경 사항을 승인하여 새 기준 이미지를 설정하거나, 우발적인 회귀에 대한 수정을 요청합니다.

스토리북 인자(제어 항목)를 사용하여 여러 스토리 변형을 만드십시오. 기본값, 로딩, 오류, 비활성화, LongText, SmallViewport를 사용할 수 있습니다. 각 변형은 별도의 VRT 스냅샷이 되므로 별도의 테스트 파일을 작성하지 않고도 상태를 포괄적으로 다룰 수 있습니다.

크로매틱과 퍼시는 스냅샷마다 여러 뷰포트 너비를 지원합니다. 스토리 또는 .storybook/preview.js의 뷰포트에서 설정하십시오. 각 뷰포트와 각 테마(밝은 테마/어두운 테마)에 대해 VRT를 실행하면 반응형 회귀와 테마 회귀를 동시에 찾아낼 수 있습니다.

주요 버전이 올라가거나 의도한 재설계가 이루어졌을 때 모든 변경 사항을 승인하십시오. 두 도구 모두 일괄 승인을 지원합니다. 주요 디자인 시스템 업데이트 후 모든 차이를 한 번에 승인하면 새 스크린샷이 이후의 점진적인 변경을 위한 기준 이미지가 됩니다.

스토리북의 play() 함수(상호작용 테스트)를 VRT와 결합하십시오. play()가 사용자 상호작용(버튼 클릭, 모달 열기)을 시뮬레이션한 다음 VRT 스냅샷이 그 결과 상태를 캡처합니다. 이를 통해 복잡한 상호작용형 컴포넌트의 시각적 출력을 테스트할 수 있습니다.

퍼시와 크로매틱은 스냅샷 단위로 요금을 부과합니다. 수백 개의 스토리와 여러 뷰포트 및 테마를 포함하는 대규모 스토리북 모음은 PR마다 수천 개의 스냅샷을 생성합니다. 사용량을 모니터링하고 스토리 데코레이터를 효율적으로 사용하며, 순수하게 로직에 초점을 맞춘 스토리는 VRT에서 제외하는 방안을 고려하십시오.

퍼시와 크로매틱은 클라우드 브라우저에서 모든 스토리를 찾아 스냅샷을 생성하고, PR 차이 검토를 만들며, 기준 이미지를 관리하여 스토리북의 VRT를 자동화합니다. 상태 범위를 위한 스토리 인자와 상호작용 테스트를 위한 play()를 함께 사용하면 컴포넌트 라이브러리에 포괄적인 시각적 품질 보증을 제공할 수 있습니다.