Playwright 테스트 러너와 구성 파일의 깊은 탐구

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

소프트웨어 개발자 및 QA 엔지니어, E2E 테스트 도구(Playwright) 사용자, 테스트 자동화를 위한 구성 파일 설계자

핵심 요약

• Playwright 테스트 러너는 TypeScript/JavaScript 지원, 병렬 실행, 스냅샷 생성, 프로젝트별 브라우저 실행 등 테스트 자동화의 핵심 기능을 제공
• playwright.config.ts 파일은 testDir, timeout, projects 등 테스트 실행 방식을 정의하는 중심 구성 파일
• Fixture는 adminPage와 같은 공유 로직을 재사용 가능한 테스트 설정으로 제공, 로그인 흐름, 사용자 권한 관리에 유리

섹션별 세부 요약

1. Playwright 테스트 러너란?

• 내장 테스트 프레임워크로 Jest/Mocha 대체 가능
• 지원 기능: TypeScript/JavaScript, 병렬 실행, 스냅샷, 리포트 생성, 테스트 재시도
• @playwright/test API와 자연스럽게 연동 가능

2. `playwright.config.ts` 구성 파일

• testDir: 테스트 스펙이 저장되는 디렉토리
• timeout: 테스트 전역 타임아웃 설정
• projects: Chromium, Firefox, WebKit 등 브라우저별 테스트 실행 설정
• reporter: HTML, 목록 형식 리포트 생성 가능

3. 테스트 파일 구성 및 태깅

• 파일 패턴: .spec.ts, .e2e.ts
• 디렉토리 구조 예시:

```bash

tests/

└── auth/

└── login.spec.ts

```

• 태깅 예시:

```ts

test.skip('미구현 테스트', async () => {});

test.only('단일 테스트 실행', async () => {});

```

4. Fixtures: 테스트 설정 재사용

• adminPage와 같은 설정/정리 로직을 재사용 가능
• 예시 코드:

```ts

const test = baseTest.extend({

adminPage: async ({ page }, use) => {

await page.goto('/admin');

await use(page);

},

});

```

5. 테스트 실행 및 디버깅

• 전체 실행: npx playwright test
• 특정 파일 실행: npx playwright test tests/auth/login.spec.ts
• 디버깅: npx playwright test --debug → Playwright Inspector 사용

6. 브라우저별 실행 및 리포트

• 특정 브라우저 실행: npx playwright test --project=firefox
• 모바일 테스트 태그 예시:

```ts

test('@mobile 로그인 테스트', async ({ page }) => { ... });

```

• 리포트 생성: npx playwright show-report
• 실패 테스트 추적: npx playwright show-trace trace.zip

결론

• Playwright 테스트 러너는 병렬 실행, 리포트 생성, 브라우저별 테스트 지원 등 테스트 자동화의 핵심 도구
• Trace Viewer를 활용해 실패 원인을 시각적으로 분석하고, @mobile과 같은 태그로 테스트 필터링 가능
• playwright.config.ts를 통해 테스트 전략을 체계적으로 정의해 확장성과 유지보수성 향상