소규모 팀은 적은 인원으로 많은 페이지와 기능을 만들어낸다. 모든 컴포넌트에 유닛 테스트를 작성하는 게 이상적이지만, 그럴 시간이 없는 게 현실이다. 비주얼 테스팅은 그 빈틈을 채워준다. 스크린샷을 베이스라인과 비교해서 UI 리그레션을 잡아내는 방식인데, 셋업에 드는 노력은 훨씬 적다.
문제점#
소규모 팀은 빠르게 움직인다. CSS를 하나 수정했는데 다른 페이지의 버튼이 깨져 있을 수 있다. 유닛 테스트는 해당 레이아웃에 대한 테스트를 명시적으로 작성하지 않는 한 이런 문제를 잡아내지 못한다. 그리고 인원이 제한된 상황에서 모든 UI 상태에 대해 포괄적인 유닛 테스트를 작성하는 건 사치다.
비주얼 테스팅이 소규모 팀에 효과적인 이유#
비주얼 테스팅은 페이지의 스크린샷을 찍고 정상 상태의 베이스라인과 비교한다. 뭔가 바뀌었으면 diff가 나온다. 개별 컴포넌트가 아니라 UI 전체를 평가하는 방식이다. 이게 소규모 팀에 잘 맞는 이유가 몇 가지 있다.
추가 노력 없이 반복 가능#
PR마다 스크린샷을 실행한다. 매번 동일한 결과가 나온다. 뭔가 밀려났으면 바로 보인다.
낮은 유지보수 비용#
베이스라인을 설정하면 나머지는 자동화가 처리한다. 개별 요소에 대한 assertion을 작성할 필요가 없다. 의도적인 변경이 있을 때 베이스라인만 업데이트하면 끝이다.
넓은 커버리지#
비주얼 테스트는 레이아웃 밀림, 색상 변경, 반응형 깨짐, 요소 겹침을 잡아낸다. 코드 리뷰에서 놓치기 쉽고 유닛 테스트로 커버하기 어려운 것들이다.
빠른 피드백#
PR에서 바로 diff를 확인할 수 있다. 내 변경이 다른 곳을 망가뜨리지 않았는지 직접 페이지를 클릭하며 돌아다닐 필요가 없다.
비주얼 테스팅은 유닛 테스팅을 대체하지 않는다#
유닛 테스트는 로직을 검증한다. 비주얼 테스트는 외관을 검증한다. 둘 다 필요하지만, 소규모 팀으로서 먼저 어디에 투자할지 골라야 한다면, 비주얼 테스트가 셋업 시간 대비 더 넓은 커버리지를 제공한다. 중요한 비즈니스 로직에는 유닛 테스트를 쓰고, 나머지에는 비주얼 테스트를 활용하자.
결론#
비주얼 테스팅은 소규모 팀이 모든 컴포넌트에 테스트를 작성하지 않고도 UI 리그레션을 잡아내는 방법을 제공한다. 베이스라인을 설정하고, PR마다 실행하고, diff를 리뷰하면 된다. 포괄적인 유닛 테스트 커버리지를 마련할 여유가 없을 때, 테스트 투자 대비 가장 높은 수익을 가져다주는 방법이다.
추가 정보 및 유용한 링크#
Visual Testing with Playwright#
이 가이드는 Playwright의 비주얼 테스팅 기능 사용법에 대한 개요를 제공한다. 비주얼 테스팅은 웹 페이지나 UI 컴포넌트의 스크린샷을 캡처하고 베이스라인과 비교하여 변경 사항을 감지하는 것이다. Playwright는 스냅샷 테스팅을 지원하며, 전체 페이지 스크린샷이나 특정 요소를 캡처해서 UI 변경이 의도치 않은 시각적 버그를 만들지 않는지 확인할 수 있다. 문서에서는 비주얼 테스팅을 설정하고, 스냅샷을 찍고, 비교 프로세스를 관리하여 시간이 지나도 애플리케이션의 시각적 무결성을 유지하는 방법을 설명한다. Visual Testing with Playwright
Best Practices for Testing with Playwright#
Playwright 문서의 이 섹션은 Playwright 테스트를 데이터베이스와 통합할 때의 권장 사례를 설명한다. 데이터베이스와 상호작용하는 테스트가 신뢰성 있고, 효율적이며, 유지보수하기 쉽도록 보장하는 방법에 대한 가이드를 제공한다. 주요 모범 사례로는 테스트 데이터 격리, 테스트 후 정리, 테스트 독립성을 유지하기 위한 트랜잭션 접근 방식 사용 등이 있다. 이런 사례를 따르면 테스트 스위트의 무결성과 신뢰성을 해치는 불안정한 테스트나 데이터 오염 같은 흔한 함정을 피할 수 있다. Best Practices for Testing with Playwright