프론트엔드
시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)
두줄요약
BackstopJS와 Storybook으로 공통 컴포넌트의 시각적 회귀 테스트를 구축했습니다. Docker와 PR 프리뷰 리포트로 환경 차이와 UI 변경 검토를 관리했습니다.
문제 상황
- 공통 컴포넌트 수정과 Next/Image 일괄 적용 시 예기치 않은 UI 사이드이펙트 위험
- 로컬 환경별 폰트·브라우저 차이로 수정 없이도 스크린샷 비교 실패 발생
해결 방법
- BackstopJS로 기준 스크린샷과 현재 렌더링 결과를 비교하는 시각적 회귀 테스트 구축
- Storybook iframe URL을 시나리오로 등록하고 organism 단위 공통 컴포넌트 테스트 구성
- 동적 UI 제외용 selector, 허용 오차, hover·click 동작 등 시나리오 옵션 활용
성능/운영 포인트
- Docker 기반 Chromium 실행으로 캡처 환경 통일
- PR 프리뷰 서버에 HTML 리포트를 복사해 변경 전후 이미지 비교 제공
asyncCaptureLimit,asyncCompareLimit, Puppeteer 옵션 조절로 타임아웃과 처리량 관리
적용해볼 점
- 초기 기준 이미지는
reference, 승인된 변경은approve로 갱신하는 운영 흐름 - 누적되는 테스트 이미지와 리포트 디렉터리의
.gitignore관리
