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

간단 소개

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

AI Summary

BackstopJS 소개 및 선택 이유
- 시각적 회귀 테스트는 UI 변경을 시각적으로 확인하는 테스트로, BackstopJS는 무료 오픈소스이며 이미지 동시 비교 기능이 있어 선택됨.
- BackstopJS는 렌더링 결과가 기존과 동일한지 비교하여 UI의 일관성을 보장하는 시각적 회귀 테스트 라이브러리임.
- 크롬 headless 브라우저와 puppeteer를 활용하여 렌더링 화면을 캡처하고 다양한 상황을 스크립트로 설정 가능.
BackstopJS 설치, 설정 및 자동화
- npm install backstopjs로 설치 후 backstop init 명령어로 초기 설정. backstop.config.js 파일에서 뷰포트 및 시나리오 설정 가능.
- 도커를 사용하여 테스트 환경을 일관되게 유지하고, github 배포 자동화와 연동하여 테스트 자동화 구축.
- 스토리북 프리뷰 서버를 활용하여 테스트 결과를 확인하고, 변경 사항을 시각적으로 비교.
BackstopJS 활용 및 문제 해결
- 공통 컴포넌트 수정 시 발생하는 사이드 이펙트 체크에 유용하며, 스토리북 컴포넌트 관련 PR 시 테스트 결과 링크를 첨부하여 변경 사항을 쉽게 확인.
- puppeteer 타임아웃 문제는 도커 리소스 수정 및 engineOptions 설정을 통해 해결 가능.