시각적 회귀 테스트(Visual Regression Test)란 코드 변경에 따른 UI의 변화를 시각적으로 확인하기 위해 진행하는 테스트입니다.
UI 컴포넌트 리팩토링을 시작하기 전, 공통 컴포넌트를 수정할 때 발생하는 예상치 못한 사이드 이펙트들을 체크하기 위하여 도입합니다.
JavaScript로 작성되는 함수의 로직은 기존 사용하고 있던 Vitest로 작성하는 단위 테스트 코드를 작성할 수 있고, Github Action을 사용해 CI로도 확인하고 있습니다.
디자이너가 있는 프로젝트라면, 예기치 않은 UI의 변경을 조심해야 합니다.
그러나 UI의 예기치 못한 변경의 경우 눈으로 일일이 확인하기 전까지는 알 수 없습니다.
이전에도 리팩토링 과정을 거치면서 의도치 않게 UI가 변경되었던 적이 있었습니다.
따라서 UI(디자인)가 변경되지 않음을 보장하면서 리팩토링하기 위해서 시각적 회귀 테스트를 도입해 보려고 합니다.
저희는 cypress-image-snapshot 플러그인을 사용했
https://docs.cypress.io/plugins#visual-testing
cypress 공식 문서에 있는 플러그인 목록 중 하나입니다.
cypress 플러그인을 사용한 이유는 다음과 같습니다.