들어가며
웹 애플리케이션을 개발하다 보면 "이 기능이 제대로 동작하는지 어떻게 확인하지?"라는 고민을 하게 됩니다. 버튼을 클릭했을 때 페이지가 잘 이동하는지, 폼을 제출했을 때 데이터가 정상적으로 저장되는지, 매번 수동으로 확인하기엔 시간도 부족하고 실수할 가능성도 높죠.
이런 문제를 해결해주는 것이 바로 E2E(End-to-End) 테스트 자동화입니다. 그리고 오늘 소개할 Playwright는 이 영역에서 빠르게 주목받고 있는 도구입니다.
E2E 테스트란?
E2E 테스트는 사용자 관점에서 애플리케이션의 전체 흐름을 검증하는 테스트입니다.
예를 들어 쇼핑몰에서 "로그인 → 상품 검색 → 장바구니 담기 → 결제"까지의 과정이 정상적으로 동작하는지 확인하는 것이죠. 단위 테스트가 함수 하나하나를 검증한다면, E2E 테스트는 실제 사용자가 경험하는 시나리오 전체를 검증합니다.
왜 필요할까요?
- 개별 컴포넌트는 정상이어도 통합했을 때 문제가 생길 수 있습니다
- 배포 전 주요 기능이 동작하는지 빠르게 확인할 수 있습니다
- 수동 테스트에 드는 반복적인 시간을 줄여줍니다
Playwright 소개
Playwright는 Microsoft에서 개발한 오픈소스 E2E 테스트 프레임워크입니다. 2020년에 처음 공개되었고, 빠른 속도와 안정성으로 Cypress, Selenium과 함께 대표적인 E2E 테스트 도구로 자리잡았습니다.
# 설치
npm init playwright@latest설치 명령어 하나로 프로젝트 구조, 설정 파일, 예제 테스트까지 자동으로 생성해줍니다.
Playwright의 주요 특징
1. 크로스 브라우저 지원
Chromium, Firefox, WebKit 세 가지 브라우저 엔진을 단일 API로 제어할 수 있습니다. 하나의 테스트 코드로 Chrome, Safari, Firefox에서 모두 동작을 검증할 수 있다는 의미입니다.
// playwright.config.js
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
]2. Auto-waiting
테스트 자동화에서 가장 골치 아픈 문제 중 하나가 타이밍입니다. 버튼이 아직 로딩 중인데 클릭하려고 하면 테스트가 실패하죠. Playwright는 요소가 클릭 가능한 상태가 될 때까지 자동으로 기다려줍니다.
// 별도의 wait 없이도 안정적으로 동작
await page.click('button#submit');3. 강력한 디버깅 도구
테스트가 실패했을 때 원인을 찾기 쉽도록 다양한 도구를 제공합니다.
- Trace Viewer: 테스트 실행 과정을 스크린샷, DOM 스냅샷, 네트워크 요청과 함께 타임라인으로 확인
- Codegen: 브라우저에서 직접 조작하면 해당 동작을 코드로 자동 생성
- UI Mode: 테스트를 시각적으로 실행하고 각 단계를 확인
# Codegen 실행
npx playwright codegen https://example.com4. 네트워크 제어
API 요청을 가로채서 원하는 응답으로 대체하거나, 네트워크 상태를 시뮬레이션할 수 있습니다. 백엔드 없이도 프론트엔드 테스트가 가능해집니다.
await page.route('**/api/users', route => {
route.fulfill({
status: 200,
body: JSON.stringify([{ id: 1, name: 'Test User' }])
});
});5. 병렬 실행
테스트를 여러 워커에서 동시에 실행하여 전체 테스트 시간을 크게 단축할 수 있습니다.
Playwright의 장점
빠른 실행 속도
브라우저와 직접 통신하는 방식을 사용해 Selenium 대비 체감될 정도로 빠릅니다. 특히 병렬 실행을 기본 지원하기 때문에 테스트 수가 많아져도 전체 실행 시간을 효율적으로 관리할 수 있습니다.
안정적인 테스트
Auto-waiting과 자동 재시도(retry) 기능 덕분에 "어제는 됐는데 오늘은 안 되는" 불안정한 테스트(flaky test)가 줄어듭니다. 이건 실무에서 정말 큰 장점입니다.
낮은 진입 장벽
Codegen으로 브라우저 조작을 녹화해서 코드를 생성할 수 있어, 처음 접하는 분들도 빠르게 테스트를 작성할 수 있습니다. 공식 문서도 잘 정리되어 있고 예제가 풍부합니다.
활발한 생태계
Microsoft의 지원 아래 꾸준히 업데이트되고 있고, VS Code 확장 프로그램도 제공합니다. GitHub Actions 등 CI/CD 파이프라인과의 연동도 간편합니다.
마치며
E2E 테스트 자동화를 시작하려는 분들에게 Playwright는 좋은 선택지입니다. 설정이 간단하고, 디버깅 도구가 강력하며, 무엇보다 안정적으로 동작합니다.
다음 글에서는 실제로 간단한 테스트를 작성하고 실행하는 과정을 다뤄보겠습니다.
📚 참고 자료
