CSS는 여러 프로퍼티가 중첨되며 결정된다. 최종적으로 적용된 프로퍼티도 명시도(specificity)나 적용된 순서뿐만 아니라 전역에 정의된 스타일에도 영향을 받는다.
SPA는 작은 UI 컴포넌트를 조합해 화면을 만든다. UI 컴포넌트 조합으로 화면을 만드는 방식은 블록을 조립하는 방식과 비슷하며, 컴포넌트 기반 개발(Component-based development, CBD)이라고도 불린다.
컴포넌트 기반 개발 방식을 사용하면 로직은 몰론이고 중복되기 쉬운 CSS 코드도 한 곳에서 관리할 수 있다.
스냅숏 테스트만으로는 전역에 정의된 스타일 영향은 알기 힘들다. HTML 출력 결과를 비교할 뿐인 스냅숏 테스트만으로는 모든 시각적 회귀 테스트를 대체할 수 없다.
가장 신뢰도 높은 방법은 실제 브라우저에 렌더링된 화면을 비교하는 것이다. 테스트할 화면을 브라우저에 렌더링하고 특정 시점에 캡처한 이미지들을 픽셀 단위로 비교할 수도 있다. 가장 기본적인 시각적 회귀 테스트다.
시각적 회귀 테스트는 헤드리스 모드로 실행한 상태에서 실시한다. 일반적으로 헤드리스 브라우저는 E2E 테스트 프레임워크에 포함됐으며, 대부분 E2E 테스트 프레임워크는 공식적으로 시각적 회귀 테스트를 지원한다.
프레임워크가 지원하는 시각적 회귀 테스트에서도 페이지 단위로 캡처한 화면을 비교한다. 프레임워크는 헤드리스 브라우저에 화면을 요청하고 화면이 이동하면 화면을 캡처한다.
스타입 변경 전후의 이미지를 비교하면 어떤 화면이 변경됐는지 확인할 수 있으나, 세세하게 알 수는 없다. 세세하게 검출하고 싶다면 시각적 회귀 테스트를 UI 컴포넌트 단위로 실시해야 한다. UI 컴포넌트 단위로 이미지를 캡처하면 영향을 받는 중간 크기의 UI 컴포넌트를 검출할 수 있다. 변경된 부분 아래에 있는 것의 세부적인 변경 사항의 검축도 가능하다.
reg-suit는 AWS S3 같은 실제 버킷 없이도 로컬에서 테스트할 수 있다.