시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)

간단 소개

BackstopJS를 활용한 시각적 회귀 테스트 구축 경험 공유: 설치, 설정, 자동화, 문제 해결 및 활용 사례를 소개합니다.

AI Summary

BackstopJS 소개 및 설치
- 시각적 회귀 테스트를 위한 오픈소스 라이브러리인 BackstopJS는 UI 변경을 시각적으로 검증하는 데 유용하다.
- BackstopJS 설치 및 초기 설정 방법: npm install backstopjs, backstop init 명령어를 통해 설정 파일 생성 및 초기 디렉토리 구조를 구성한다.
- backstop reference 명령어로 기준 이미지를 생성하고, backstop test로 테스트 실행, backstop openReport로 결과 확인, backstop approve로 변경 사항 승인한다.
BackstopJS 설정 및 활용
- backstop.json 또는 backstop.config.js 파일을 통해 테스트 시나리오, 뷰포트, URL 등을 설정한다.
- 스토리북 연동을 통해 컴포넌트 단위 테스트를 수행하고, Docker를 사용하여 일관된 테스트 환경을 구축한다.
- 테스트 자동화를 위해 CI/CD 파이프라인에 BackstopJS를 통합하고, 테스트 결과를 PR 검토 시 활용한다.
BackstopJS 문제 해결 및 장점
- Puppeteer 타임아웃 문제 해결을 위해 엔진 옵션 조정 및 Docker 리소스 설정을 변경한다.
- BackstopJS는 이미지 비교를 통한 직관적인 UI 변경 확인, 다양한 설정 옵션을 통한 확장성, 스토리북 및 실제 프로덕션 URL 테스트 지원 등의 장점을 제공한다.