devtools
Playwright 완벽 가이드 — 2026년 E2E 테스트의 표준
Microsoft가 개발한 Playwright로 크로스 브라우저 E2E 테스트를 구성하고 CI/CD 파이프라인에 통합하는 방법을 상세히 정리하였다.
- ·개발사: Microsoft
- ·지원 브라우저: Chromium, Firefox, WebKit (Safari)
- ·언어: JavaScript, TypeScript, Python, Java, C#
- ·Cypress 대비 병렬 실행 속도 우위
Cypress로 운영하던 E2E 테스트 40개를 Playwright로 전환하면서 가장 크게 체감한 차이는 크로스 브라우저 실행 속도였다. Cypress에서 크로스 브라우저 테스트는 CI 시간이 20분을 넘었는데, Playwright의 병렬 실행과 WebKit 내장 지원 덕분에 세 브라우저 동시 실행이 8분 내에 완료되었다. 특히 OAuth 팝업 창을 처리하는 테스트를 작성할 때 Playwright의 멀티 탭 API가 Cypress 우회 방법보다 훨씬 간결하였다.
Playwright가 Cypress를 앞서는 이유
멀티 브라우저·멀티 탭 지원
Playwright는 Chromium, Firefox, WebKit 세 가지 브라우저 엔진을 단일 API로 제어한다. Cypress가 Chromium 계열 브라우저에만 집중하는 것과 달리, Playwright는 Safari 엔진인 WebKit을 포함하여 실제 크로스 브라우저 테스트가 가능하다. 또한 단일 테스트 내에서 여러 탭과 팝업 윈도우를 동시에 제어할 수 있어, OAuth 로그인 흐름이나 새 탭으로 열리는 링크 테스트가 자연스럽게 구현된다. 인증 상태를 storageState로 파일에 저장하여 재사용하는 기능도 Playwright의 강력한 장점 중 하나이다.
자동 대기(Auto-waiting)와 로케이터
Playwright의 Auto-waiting 기능은 요소가 DOM에 나타나고, 표시되고, 안정화될 때까지 자동으로 대기한다. Cypress의 cy.wait() 명시적 대기 패턴이나 임의의 setTimeout 삽입 없이 동적 UI를 안정적으로 테스트할 수 있다. 로케이터(Locator) API는 요소 선택 방식을 캡슐화하여 페이지 구조가 변경되어도 테스트를 쉽게 유지보수할 수 있게 한다. page.getByRole(), page.getByText(), page.getByTestId() 같은 의미론적 선택자는 접근성(Accessibility) 속성 기반으로 동작하여 실제 사용자 행동에 가까운 테스트를 작성할 수 있다.
테스트 작성 패턴
Page Object Model 구현
Page Object Model(POM)은 페이지의 UI 요소와 상호작용 로직을 클래스로 캡슐화하여 테스트 코드의 재사용성과 유지보수성을 높이는 패턴이다. Playwright에서는 각 페이지를 나타내는 클래스를 만들고, 로케이터와 액션 메서드를 정의한 뒤 테스트에서 인스턴스를 생성하여 사용한다. 로그인 페이지 클래스를 만들어 loginWith(email, password) 메서드를 정의하면, 로그인이 필요한 모든 테스트에서 동일한 메서드를 호출하여 중복 코드를 제거할 수 있다.
API 모킹과 네트워크 인터셉션
Playwright의 page.route() API를 사용하면 특정 URL 패턴의 네트워크 요청을 인터셉트하여 모의 응답을 반환할 수 있다. 외부 API 의존성을 제거하고 다양한 응답 시나리오(에러, 지연, 부분 성공)를 테스트 코드에서 직접 시뮬레이션할 수 있다. 이 기능은 E2E 테스트와 통합 테스트의 경계를 유연하게 조정하게 해주며, 외부 서비스의 불안정성으로 인한 테스트 실패를 방지한다.
CI/CD 통합과 테스트 리포트
GitHub Actions 연동
Playwright는 GitHub Actions와의 통합을 공식 지원한다. npx playwright install --with-deps 명령으로 브라우저 바이너리를 설치하고 npx playwright test를 실행하면 된다. 테스트 실패 시 스크린샷과 비디오가 자동으로 저장되며, GitHub Actions 아티팩트로 업로드하여 실패 원인을 시각적으로 분석할 수 있다. playwright/test-results 경로의 아티팩트를 다운로드하면 HTML 리포트를 로컬에서 열어 각 테스트 단계의 스크린샷을 순서대로 확인할 수 있다.
자주 묻는 질문
Cypress와 Playwright 중 어떤 것을 선택해야 하나요?+
크로스 브라우저 테스트가 필요하거나 병렬 실행 성능이 중요하다면 Playwright를 권장합니다. 팀이 이미 Cypress에 익숙하고 Chromium 전용 테스트로 충분하다면 Cypress도 좋은 선택입니다.
Playwright로 모바일 테스트가 가능한가요?+
네. devices 옵션으로 iPhone, Pixel 등의 모바일 뷰포트와 User-Agent를 에뮬레이션할 수 있습니다. 실제 디바이스 테스트는 지원하지 않습니다.
관련 글
Vitest 완벽 가이드 — Jest를 대체하는 Vite 네이티브 테스트 프레임워크
Vite 기반 프로젝트에서 Jest보다 10배 빠른 Vitest로 유닛 테스트와 컴포넌트 테스트를 구성하는 방법을 상세히 정리하였다.
Biome 완벽 가이드 — ESLint와 Prettier를 하나로 대체하는 Rust 기반 도구
Biome의 린터·포매터 통합 기능, ESLint 대비 25배 빠른 성능, 마이그레이션 전략과 CI 통합 방법을 실무 관점에서 정리하였다.
Next.js 15 Partial Prerendering 완벽 가이드 — 정적과 동적 렌더링의 통합
Next.js 15에서 도입된 Partial Prerendering(PPR)의 개념, Suspense 경계 설계, 캐싱 전략 변경사항을 실무 관점에서 정리하였다.