BackstopJS 적용 후기 (Visual Regression Test)

이 글은 카카오엔터테인먼트 스토리 FE팀에서 BackstopJS를 6개월간 적용하며 얻은 경험과 인사이트를 공유합니다. BackstopJS는 헤드리스 브라우저를 통해 실제 서비스 페이지의 시각적 회귀 테스트를 자동화하는 도구입니다.

팀은 실제 서비스 페이지 대신 스토리북의 빌드 결과물을 기반으로 BackstopJS를 구축하여 안정성을 높였습니다. 특히 Atomic 디자인 시스템의 Organism 단위 컴포넌트 테스트에 집중하여, 기획 변경 시 UI가 크게 바뀌는 부분에 대한 테스트 효율성을 극대화했습니다.

js`와 같은 스크립트를 활용하여 테스트 시나리오 관리를 자동화하고, 시각적 회귀 테스트의 실질적인 이점을 소개합니다. , 시각적 회귀 테스트의 실질적인 이점을 소개합니다.