Playwright는 Microsoft가 개발한 크로스 브라우저 E2E(End-to-End) 테스팅 프레임워크다. Chromium, Firefox, WebKit을 단일 API로 테스트하며 자동 대기(auto-waiting)와 네트워크 인터셉션을 지원한다.
특징
| 항목 | 설명 |
|---|
| 브라우저 지원 | Chromium, Firefox, WebKit (Safari 엔진) |
| 자동 대기 | 요소가 조작 가능해질 때까지 자동 대기 |
| 네트워크 인터셉션 | API 모킹 및 요청 차단 |
| 트레이서 | 테스트 실행 타임라인 시각화 |
| 병렬 실행 | 멀티 워커로 동시 실행 |
| 컴포넌트 테스팅 | React/Vue/Svelte 컴포넌트 테스트 |
기본 테스트 예시
typescript
import { test, expect } from '@playwright/test';
test.describe('로그인 플로우', () => {
test('유효한 자격증명으로 로그인', async ({ page }) => {
await page.goto('https://example.com/login');
await page.getByLabel('이메일').fill('user@example.com');
await page.getByLabel('비밀번호').fill('password123');
await page.getByRole('button', { name: '로그인' }).click();
await expect(page).toHaveURL('/dashboard');
await expect(page.getByText('환영합니다')).toBeVisible();
});
test('잘못된 비밀번호 오류 표시', async ({ page }) => {
await page.goto('https://example.com/login');
await page.getByLabel('비밀번호').fill('wrong');
await page.getByRole('button', { name: '로그인' }).click();
await expect(page.getByRole('alert')).toContainText('비밀번호가 올바르지 않습니다');
});
});
API 모킹
typescript
test('API 응답 모킹', async ({ page }) => {
await page.route('/api/users', async route => {
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify([{ id: 1, name: 'Alice' }]),
});
});
await page.goto('/users');
await expect(page.getByText('Alice')).toBeVisible();
});
playwright.config.ts
typescript
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './e2e',
fullyParallel: true,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: [['html'], ['github']],
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
],
});
관련 문서
