tdd
시각적 회귀 테스트
시각적 회귀 테스트
특징
Node.js 환경에서 실행되는 스냅샷 테스트와는 다르게 실제 렌더링된 UI 결과의 이미지를 스냅샷으로 저장하기 때문에 컴포넌트의 스타일이나 레이아웃에 대한 변경 사항 까지 모두 감지하여 검증할 수 있다.
UI에 변경사항이 발생했을 때 기존과 다른 점이 있는지 확인하고 예상치 못한 변경일 경우 결함으로 판단해 수정한다.
시각적 회귀 테스트는 실제 렌더링된 UI 결과의 이미지를 스냅샷으로 저장하고 비교하기 때문에 실제 컴포넌트의 스타일이나 레이아웃까지 검증이 가능하다.
시간이 오래 소요되는 테스트이기 때문에 수시로 시각적 회귀 테스트를 실행하는 것은 시간과 비용을 낭비하는 일이다. 따라서 특정 시점에만 테스트가 실행되도록 하기 위해 CI 연동은 필수이다.
한계점
- 시각적 회귀 테스트는 비용과 관리에 대한 부담이 존재한다. 특히, 크로마틱은 월 5000장의 스냅샷만 무료이기 때문에 비용이 많이 든다.
- 이슈의 원인을 파악하는데 오랜시간이 걸린다. (무엇을 검증하는지 명확하게 설명하는 테스트 디스크립션이 없고 특정 기능을 검증하는 것이 아니라 UI 결과를 검증하는 것이기 때문이다.)
- 피드백이 느리다. 스냅샷 비교하는 과정에서 많은 시간이 소요되기 때문이다. 또한, 앱의 전반적인 기능과 디자인까지 모두 개발이 어느 정도 완료된 상태에서 도입해야 한다.
- 정말 필요한 경우에만 시각적 회귀 테스트가 실행되도록 해야 비용을 절약할 수 있다. 이렇게 규칙을 세워야 한다.