Playwright 기반 UI/API 테스트 설계 및 Shared-state Race 해결

Setup & Your First UI + API Tests (Playwright + TypeScript, Ch.2)

kadir2026년 6월 8일7분beginner

AI 요약

Context

단순한 툴링 도입보다 구조적 설계의 부재가 자동화 테스트 실패의 핵심 원인으로 분석됨. 단일 데이터베이스를 공유하는 환경에서 Parallel Execution 도입 시 발생하는 데이터 정합성 붕괴와 URL 해석 방식에 따른 런타임 오류가 주요 병목 지점으로 식별됨.

API와 UI 테스트를 별도 Project로 분리하여 Browser 리소스 낭비를 제거한 최적화 구조 설계
Playwright의 relative URL 해석 특성에 따른 Path 유실 방지를 위해 env.apiURL을 통한 Full URL 명시적 구성
Shared-state Race 방지를 위해 test.describe.configure({ mode: 'serial' })를 적용한 순차 실행 보장
CSS Selector 대신 Role-based Locator(getByRole)를 채택하여 접근성 검증과 테스트 회복탄력성 동시 확보
TypeScript Path Alias 설정을 통한 모듈 참조 구조 단순화 및 유지보수 효율성 제고

실천 포인트

1. BaseURL 설정 시 Leading Slash(/)가 전체 경로를 대체하는 Playwright의 URL resolve 동작 확인

2. DB 상태를 변경하는 테스트가 포함된 경우 Parallel 모드 대신 Serial 모드 또는 테스트별 독립 데이터셋 할당 검토

3. 유지보수 비용 절감을 위해 CSS Selector보다 Role 기반 Locator 우선 사용

4. 환경 변수(env)를 통한 URL 관리로 테스트 환경 간의 이식성 확보

태그