Playwright를 활용한 컴포넌트 및 E2E 테스트 커버리지

이 게시물은 고객센터 실시간 채팅 서비스에서 Playwright를 사용하여 컴포넌트 테스트와 E2E 테스트를 병행하며 80% 이상의 테스트 커버리지를 달성한 경험을 공유합니다.

Playwright 선택 이유

• 멀티 브라우저(WebKit 포함) 지원
• 고급 브라우저 제어 기능 (멀티 탭, 권한 설정, 네트워크 조작 등)
• 모바일 디바이스 프로필과 WebView 환경 지원

테스트 구성 및 커버리지 수집

• 컴포넌트 테스트는 React 기반 각 컴포넌트별 spec 파일로 작성
• E2E 테스트는 사용자 플로우 중심으로 Chromium, WebKit, 모바일 프로필에서 병렬 실행
• Vite 플러그인과 Playwright afterEach 훅을 활용해 커버리지 코드 삽입과 수집, 사후 병합을 통한 리포트 생성

결과 및 향후 계획

• 총 228개의 테스트가 4개 브라우저에서 모두 성공
• 라인 커버리지 80% 달성으로 핵심 기능 안정성 확보
• 향후 분기 커버리지 개선, 모바일 시나리오 확대, CI/CD 자동화 계획