BackstopJS 적용 후기 (Visual Regression Test)
프론트엔드
BackstopJS 적용 후기 (Visual Regression Test)
두줄요약
BackstopJS를 스토리북 기반 시각적 회귀 테스트로 운영하며 사이드이펙트 탐지와 문서화를 함께 얻은 사례를 소개했습니다. 또한 PR 코멘트와 develop 머지 후 approve 자동화로 테스트 운영 부담을 줄였습니다.
핵심 내용
- BackstopJS를 스토리북 기반 시각적 회귀 테스트로 적용한 6개월간의 활용 경험 공유
- Organism 단위 스토리북 시나리오로 테스트 범위를 관리하며, 컴포넌트 변경 시 사이드이펙트와 깨진 스토리북을 조기에 탐지
- PR 코멘트 확인, develop 머지 후 approve 자동화 등 젠킨스·도커 기반 테스트 운영 자동화 사례 소개
적용해볼 점
- 변경 가능성이 큰 실제 서비스 페이지보다 스토리북 빌드 결과물 중심 테스트 구성
- 케이스별 스토리북 시나리오 정리로 테스트 자동화와 문서화 동시 확보
- 스토리북 버전 변경처럼 환경이 바뀔 때는 HTTP 서버 기반 접근 방식으로 테스트 구조 조정