Functional Test의 맹점을 극복한 Visual Regression 도입으로 UI 레이아웃 버그 원천 차단

Context

DOM 존재 여부와 텍스트 일치 여부만 확인하는 Functional Test의 한계로 인해 모바일 뷰포트 내 요소 겹침 현상을 감지하지 못한 상황. 런타임 동작은 정상이나 실제 사용자 인터랙션이 불가능한 Visual Regression 이슈의 식별 불가 문제 발생.

Technical Solution

• Playwright의 toHaveScreenshot API를 활용한 픽셀 단위 스냅샷 비교 구조 설계
• maxDiffPixelRatio: 0.01 설정을 통한 미세한 레이아웃 변동 허용 범위 정의 및 오탐지 방지
• mask 옵션을 통해 Timestamp, Order ID 등 매 실행 시 변하는 Dynamic Element를 제외하여 Test Flakiness 제거
• playwright.config.ts 내 Desktop(1280x720)과 Mobile(375x667) 뷰포트 다각화로 디바이스별 렌더링 정합성 검증
• 기능적 동작 검증(Functional)과 시각적 정합성 검증(Visual)의 상호 보완적 테스트 파이프라인 구축