BackstopJS 적용 후기 (Visual Regression Test)

카카오엔터테인먼트 스토리 FE팀에서 BackstopJS를 6개월간 적용한 후기 및 활용 사례를 소개합니다. BackstopJS는 헤드리스 브라우저를 통해 실제 서비스 페이지 단위의 시각적 회귀 테스트를 수행합니다.

프로젝트에서 Atomic 디자인 시스템을 활용하고 있어, 기획 변경 시 UI가 크게 바뀌는 Organism 단위로 스토리북 테스트를 구축했습니다. 이를 통해 새로운 Organism 스토리북 작성 시 BackstopJS 시나리오에 스토리북 URL을 추가하여 테스트를 자동화했습니다.

js` 스크립트를 별도로 생성하여 효율성을 높였습니다. 이 글은 BackstopJS 적용 경험과 함께 시각적 회귀 테스트의 이점을 공유합니다.

ckstopJS 적용 경험과 함께 시각적 회귀 테스트의 이점을 공유합니다.