Playwright#
Playwright는 Microsoft에서 개발한 현대적이고 강력한 웹 자동화 및 테스팅 라이브러리.
크로스 브라우저, 크로스 플랫폼 웹 테스팅을 위해 설계되었으며, Chromium, Firefox, WebKit을 포함한 주요 브라우저들을 단일 API로 제어할 수 있다.
안정적이고 신뢰할 수 있는 E2E 테스트 환경을 제공하며, 복잡한 애플리케이션에서도 안정적으로 동작한다.
주요 특징#
다중 브라우저 지원
Playwright는 다음 브라우저들을 완벽하게 지원한다:
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Apple Safari (WebKit)
이는 개발자들이 여러 브라우저에서 일관된 테스트를 수행할 수 있게 해준다.
최신 웹 기술 대응
현대 웹 애플리케이션의 복잡한 시나리오를 처리할 수 있는 고급 기능 제공:
- 자동 대기(Auto-waiting)
- 네트워크 요청 모니터링
- 브라우저 상황의 동적 제어
- 복잡한 이벤트 시뮬레이션
다국어 지원
JavaScript/TypeScript 외에도 다음 언어를 지원한다:
- 완벽한 크로스 브라우저 호환성
- 빠르고 안정적인 테스트 실행
- 헤드리스 및 헤드풀 모드 지원
- 자동 대기 및 재시도 메커니즘
- 풍부한 디버깅 도구
- 네트워크 및 API 모킹 기능
단점 및 한계#
- 학습 곡선이 다소 가파름
- 대규모 프로젝트에서 성능 오버헤드 가능성
- 초기 설정의 복잡성
- 일부 레거시 브라우저 지원 제한
설치 및 기본 설정#
Npm을 통한 설치
1
2
3
4
5
| # JavaScript/TypeScript
npm init playwright@latest
# 특정 언어 선택
npm init playwright@latest -- --lang {javascript|typescript|python|java|dotnet}
|
기본 구성 파일 (playwright.config.ts)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests',
timeout: 30000,
fullyParallel: true,
retries: 2,
workers: undefined,
reporter: 'html',
use: {
browserName: 'chromium',
headless: true,
viewport: { width: 1280, height: 720 }
}
});
|
주요 사용 방법 및 예시#
주요 명령어#
page.goto(url): 지정된 URL로 이동.page.click(selector): 특정 요소를 클릭.page.type(selector, text):입력 필드에 텍스트 입력.page.waitForSelector(selector):특정 요소가 DOM에 나타날 때까지 대기.page.screenshot():현재 페이지의 스크린샷 생성.browser.newContext():새로운 브라우저 컨텍스트 생성(세션 분리).browser.close():브라우저 종료.
기본 브라우저 탐색#
1
2
3
4
5
6
7
8
9
10
11
12
| import { test, expect } from '@playwright/test';
test('basic navigation', async ({ page }) => {
// 웹사이트 방문
await page.goto('https://example.com');
// 제목 확인
await expect(page).toHaveTitle('Example Domain');
// 특정 요소 상호작용
await page.click('text=More information');
});
|
복잡한 시나리오 테스트#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| test('login workflow', async ({ page }) => {
await page.goto('https://login.example.com');
// 로그인 폼 작성
await page.fill('#username', 'testuser');
await page.fill('#password', 'secret123');
// 폼 제출
await page.click('button[type="submit"]');
// 로그인 후 페이지 검증
await expect(page).toHaveURL('/dashboard');
await expect(page.locator('#welcome')).toBeVisible();
});
|
네트워크 요청 모니터링#
1
2
3
4
5
6
7
8
9
10
11
12
| test('api request test', async ({ page }) => {
// API 요청 인터셉트
const responsePromise = page.waitForResponse('**/api/data');
await page.goto('https://example.com');
const response = await responsePromise;
expect(response.status()).toBe(200);
const responseBody = await response.json();
expect(responseBody.length).toBeGreaterThan(0);
});
|
모바일/태블릿 에뮬레이션#
1
2
3
4
5
6
7
8
9
10
11
12
| test('mobile view test', async ({ page }) => {
// 아이폰 12 에뮬레이션
await page.setViewportSize({
width: 390,
height: 844
});
await page.goto('https://example.com');
// 모바일 특화 요소 검증
await expect(page.locator('.mobile-menu')).toBeVisible();
});
|
CLI 명령어#
1
2
3
4
5
6
7
8
9
10
11
| # 테스트 실행
npx playwright test
# 특정 브라우저 테스트
npx playwright test --project=chromium
# UI 모드로 테스트
npx playwright test --ui
# 테스트 리포트 생성
npx playwright show-report
|
참고 및 출처#
Playwright