프론트엔드
Playwright로 하는 Component Test와 E2E Test Coverage
두줄요약
Playwright로 컴포넌트 테스트와 E2E 테스트를 병행해 고객센터 채팅의 핵심 사용자 여정을 검증했습니다. 80% 커버리지를 달성하며 크로스 브라우징과 모바일 환경 안정성을 확보했습니다.
선택 이유
- 고객센터 실시간 채팅의 핵심 여정 검증을 위해 Playwright 채택
- Web, Mobile Web, WebView 환경과 iOS Safari(WebKit) 호환성 대응 필요
- 멀티 브라우저, 모바일 디바이스, 권한·다운로드·포커스 제어 요구
구조와 흐름
- 컴포넌트 테스트로 개별 UI 상태 전이와 클릭 이벤트 검증
- E2E 테스트로 접속부터 상담 연결, 메시지·파일 전송, 종료까지 사용자 여정 검증
- React 19, Vite, TanStack Router, Sendbird SDK 기반 SPA에 Playwright CT와 E2E 병행
성능/운영 포인트
- Vite Istanbul 인스트루멘테이션, Playwright afterEach 수집, 사후 병합으로 E2E 커버리지 산출
- Chromium, WebKit, 모바일 프로필 멀티 프로젝트 병렬 실행
- 테스트 스크립트 표준화와 coverage-e2e 리포트 생성으로 점검 체계 구성
적용해볼 점
- 핵심 사용자 플로우는 수동 테스트만이 아니라 CT와 E2E를 함께 구성
- 크로스 브라우징과 모바일 재현성이 중요한 서비스에 Playwright 활용
- 커버리지 지표를 기준으로 부족한 분기와 시나리오를 추가 점검