Playwright로 하는 Component Test와 E2E Test Coverage

간단 소개

Playwright를 이용한 Component Test와 E2E Test Coverage 구축 경험 공유 및 테스트 자동화 전략 소개

AI Summary

Playwright 선택 이유
- Cypress 대비 iOS Safari 호환성과 모바일 뷰 재현성이 중요
- 파일 업로드/미디어 재생, 웹소켓 기반 메시징 등 브라우저 레벨 제어 필요
- Web과 Webview 모두에서 사용되므로 멀티 브라우저와 다양한 모바일 디바이스 프로필 지원이 중요
Component Test와 E2E Test 병행 이유
- 실시간 채팅은 UI 상호작용과 End-To-End 시나리오의 연속성이 모두 중요
- 컴포넌트 테스트(CT)로 핵심 UI 상태 전이를 검증하고, E2E 테스트로 실제 사용자 여정을 통합 검증
- 두 층을 병행하여 UI 동작 신뢰도와 사용자 플로우 신뢰도를 동시에 확보
테스트 목표 및 방법
- 사용하는 모든 컴포넌트의 테스트 + E2E 커버리지 총 **80%**를 목표
- Vite 인스트루멘테이션(istanbul) + Playwright afterEach 수집 + 사후 병합으로 브라우저 실행 환경의 라인 커버리지 산출
- E2E 테스트로 유저 타입에 따른 접속, 카테고리 선택, 상담원 연결, 메시지/파일 전송, 상담 종료 등을 검증