시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)
데브옵스
시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)
두줄요약
BackstopJS로 시각적 회귀 테스트를 구축한 경험을 정리했습니다. 스토리북과 Docker를 함께 사용해 UI 변경 검증과 운영 안정성을 높였습니다.
핵심 내용
- BackstopJS를 활용한 시각적 회귀 테스트 구축 경험 공유
- 렌더링 결과 스크린샷을 기준 이미지와 비교해 UI 변경 영역을 식별
- 무료 오픈소스 선택, headless 브라우저와 puppeteer 기반 시나리오 설정
선택 이유
- 공통 컴포넌트 수정 시 예상치 못한 사이드이펙트 점검 필요
- 유료 서비스 대신 무료 오픈소스와 이미지 동시 비교 기능을 우선 고려
- 스토리북, 실제 프로덕트 URL 등 다양한 대상에 확장 가능
구조와 흐름
- backstop init으로 초기 폴더와 설정 파일 생성
- reference로 기준 이미지 저장, test로 비교 수행, approve로 기준 이미지 갱신
- viewports와 scenarios로 모바일·PC 및 스토리별 테스트 구성
성능/운영 포인트
- 환경 차이로 인한 실패를 줄이기 위해 Docker와 Chromium 의존성 추가
- gitignore로 test 결과 누적 파일 관리
- asyncCaptureLimit, asyncCompareLimit, timeout 대응 설정으로 테스트 안정성 조정