피드로 돌아가기
Dev.toFrontend
원문 읽기
Network Interception을 통한 테스트 결정론 및 백엔드 의존성 제거
The Playwright Playbook — Part 2: Network Interception — The Complete Guide
AI 요약
Context
UI 테스트 시 백엔드 가용성 및 데이터 상태에 따른 테스트 결과의 불안정성 발생. 실제 서버 의존으로 인해 500 에러나 타임아웃 등 엣지 케이스 시뮬레이션이 어렵고 테스트 실행 속도가 저하되는 한계 존재.
Technical Solution
- Browser Action과 Server 사이의 Network Layer에 Route Handler를 배치한 인터셉션 아키텍처 설계
- Fulfill, Abort, Continue 세 가지 제어 옵션을 통한 API 응답 및 네트워크 상태의 완전한 제어권 확보
- page.route()를 page.goto() 이전에 등록하여 초기 렌더링 시 발생하는 모든 API 요청을 캡처하는 사전 정의 전략 채택
- Local JSON Fixtures를 활용한 Mock Data 주입으로 백엔드 없이 독립적인 프론트엔드 상태 검증 구조 구축
- 특정 HTTP 상태 코드(500, 404 등)를 강제 반환하는 Mocking을 통해 UI의 에러 핸들링 로직을 결정론적으로 검증
실천 포인트
1. page.route() 설정을 page.goto() 호출 전 단계에서 수행하여 초기 요청 누락 방지
2. 에러 배너, 빈 상태(Empty State) 등 엣지 케이스 검증 시 실제 서버 장애 대신 Route Fulfill의 status 코드 조작 활용
3. 테스트 데이터의 일관성 유지를 위해 하드코딩된 값이 아닌 외부 JSON Fixtures 파일 기반의 Mocking 적용