Playwright는 Microsoft에서 개발하고 공개한 오픈소스 프레임워크로, 주로 웹 애플리케이션의 브라우저 자동화 및 종단 간(E2E) 테스트에 사용됩니다. 이 도구를 통해 개발자는 실제 사용자처럼 동작하는 스크립트를 작성하여 웹 페이지를 제어할 수 있습니다.
주요 활용 분야
1. 웹 자동화 테스트
웹사이트의 기능을 코드로 자동 검증할 수 있습니다. 예를 들어 다음 작업들을 스크립트로 수행할 수 있습니다:
- 로그인 처리
- 버튼 클릭
- 폼 데이터 입력
- 페이지 전환 확인
- 결과 화면 검증
import { test, expect } from '@playwright/test';
test('사용자 로그인 테스트', async ({ page }) => {
await page.goto('https://example.com/auth');
await page.locator('#email').fill('user@test.com');
await page.locator('#pass').fill('password123');
await page.click('button#loginBtn');
await expect(page).toHaveURL(/\/home/);
});
이러한 테스트는 CI/CD 파이프라인에 통합되어 지속적인 품질 보장을 지원합니다.
2. 종단 간(E2E) 시나리오 테스트
전체 비즈니스 플로우를 검증하는 데 적합합니다. 예를 들어 다음과 같은 순차적 흐름을 자동으로 테스트할 수 있습니다:
회원가입 → 인증 → 상품 선택 → 결제 → 주문 내역 확인
전자상거래, 금융 서비스, SaaS 플랫폼 등에서 핵심 기능의 안정성을 보장하는 데 유용합니다.
3. 브라우저 조작 자동화
사용자 행동을 코드로 구현할 수 있으며, 대표적인 API는 다음과 같습니다:
await page.click('.submit');
await page.type('#name', 'John Doe');
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
이 방식은 반복적인 수작업을 줄이고 효율성을 높이는 데 효과적입니다.
4. 동적 콘텐츠 크롤링
JavaScript 기반 SPA(Single Page Application)도 정확히 렌더링된 후 데이터를 추출할 수 있어, 일반적인 HTTP 요청 기반 크롤러보다 우수한 성능을 발휘합니다. 특히 다음과 같은 경우에 유리합니다:
- React, Vue, Angular 앱에서 실시간 업데이트되는 정보 수집
- 클라이언트 사이드 렌더링(CSR) 페이지 크롤링
- 자동화 감지 회피가 필요한 사이트 접근
5. 시각적 테스트 및 문서 생성
스크린샷이나 PDF 출력 기능을 통해 UI 변경 감지 또는 보고서 자동 생성이 가능합니다:
await page.screenshot({ path: 'dashboard.png' });
await page.pdf({ path: 'report.pdf', format: 'A4' });
UI 리그레션 테스트나 정기 보고서 자동화에 활용됩니다.
지원 브라우저
Playwright는 여러 브라우저 엔진을 동시에 지원하여 크로스 브라우징 테스트를 용이하게 합니다:
- Chromium (Chrome 기반)
- Firefox
- WebKit (Safari 기반)
각 브라우저별로 동일한 스크립트를 실행해 호환성 문제를 사전에 탐지할 수 있습니다.
Playwright vs Selenium 비교
| 항목 | Playwright | Selenium |
|---|---|---|
| 실행 속도 | 빠름 | 상대적으로 느림 |
| 안정성 | 높음 (자동 대기 메커니즘 내장) | 낮음 (명시적 대기 필요) |
| 디버깅 편의성 | Trace Viewer, 동영상 녹화 제공 | 기본 로깅 중심 |
| 비동기 처리 | 네이티브 지원 | WebDriverWait 등 추가 설정 필요 |
프론트엔드 개발에서의 활용
- 컴포넌트 기반 테스트: React, Vue, Angular 앱의 상태 변화 테스트
- 시각적 회귀 테스트: 디자인 변경 여부 자동 감지
- SPA 크롤링: CSR로 구성된 대시보드 데이터 추출
- 관리 작업 자동화: 반복적인 로그인 및 데이터 다운로드 스크립트
지원 언어
다양한 프로그래밍 언어로 사용 가능하며, 각각 공식 라이브러리를 제공합니다:
- JavaScript / TypeScript (가장 활발한 생태계)
- Python
- Java
- C# (.NET)
프론트엔드 개발에서는 Node.js 환경과 함께 사용하는 경우가 많습니다.
내장 테스트 도구
playwright test 명령어를 통해 다음 기능을 통합 관리할 수 있습니다:
- 병렬 테스트 실행
- 자동 실패 스크린샷
- 테스트 중 동영상 녹화
- Trace 파일 생성을 통한 디버깅
실제 예제: 페이지 스크린샷 자동 캡처
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://www.example.com');
await page.screenshot({ path: 'example-home.png' });
await browser.close();
})();
이 스크립트는 무헤드리 모드로 브라우저를 열고, 지정한 URL에 접속한 후 이미지를 저장하고 종료합니다.