Automation/Playwright

Playwright 입문 가이드

QA_Oz 2024. 12. 31. 08:00

Playwright 입문 가이드

웹 자동화와 E2E(End-to-End) 테스트는 최근 웹 개발에서 필수가 되었습니다. 그중에서도 Playwright는 Microsoft에서 오픈 소스로 개발·유지되고 있는 강력한 테스트 자동화 프레임워크입니다. 이번 포스팅에서는 Playwright의 주요 특징과 간단한 설치 방법, 기본 사용법 등을 살펴보도록 하겠습니다.

1. Playwright란?

Playwright는 크로스 브라우저 테스트 자동화를 위한 도구로, 다양한 브라우저(Chromium, Firefox, WebKit 등)를 지원합니다. 원래 구글의 Puppeteer가 Chromium 기반 브라우저에 특화되어 있었다면, Playwright는 더 폭넓은 호환성에 초점을 맞추어 설계되었습니다. 다음은 Playwright의 대표적인 특징입니다:

  1. 멀티 브라우저 지원: Chromium(Chrome/Edge), Firefox, WebKit(Safari) 등 주요 브라우저를 지원해, 플랫폼 간 테스트 환경을 쉽게 구축할 수 있습니다.
  2. 자동 대기(Wait) 기능: 요소가 나타날 때까지 자동으로 대기(wait)해주어, 안정적인 테스트 작성을 돕습니다.
  3. 강력한 API: 스크린샷, PDF 생성, 네트워크 트래픽 감시 등 폭넓은 기능을 제공합니다.
  4. 다양한 언어 바인딩 지원: Node.js(JavaScript/TypeScript), Python, .NET(C#) 등 원하는 언어를 골라 사용할 수 있습니다.

2. Playwright의 장점

  1. 테스트 안정성
    Playwright는 자동 대기(wait) 시스템을 기본적으로 탑재하고 있어, DOM 요소를 찾을 때 시간 지연을 두거나 별도의 코드를 추가할 필요가 적습니다. 그만큼 테스트 실행이 안정적이고, 예측 가능해집니다.
  2. 멀티 브라우저, 멀티 플랫폼
    단일 API로 다양한 브라우저에서 테스트가 가능하며, macOS, Windows, Linux 환경에서 모두 동작합니다.
  3. 확장성
    네트워크 상황 모사(Throttle), 위치 정보 테스트(Geolocation), 권한 테스트(Notifications, Camera 등)와 같이 실제 환경에 가까운 시나리오 테스트가 가능합니다.
  4. 지속적 통합(CI) 환경 지원
    GitHub Actions, Jenkins 등 다양한 CI 툴과 쉽게 연동할 수 있어, 자동화 파이프라인을 구축하기에 적합합니다.

3. 설치 및 기본 사용법

Playwright는 Node.js 환경에서 가장 많이 사용됩니다. 간단히 Node.js 환경에서의 설치 과정을 예로 들겠습니다.

3.1 Node.js 프로젝트 생성

# 프로젝트 폴더 생성 후 이동
mkdir my-playwright-test
cd my-playwright-test

# npm 초기화
npm init -y

3.2 Playwright 설치

npm install --save-dev @playwright/test

설치가 완료되면 package.json 파일에 @playwright/test가 devDependencies로 추가됩니다. 해당 라이브러리는 테스트 러너와 함께 제공되므로, 별도의 테스트 러너(Jest, Mocha 등)를 추가로 사용할 필요가 없습니다.

3.3 테스트 프로젝트 설정 (config 파일)

Playwright 설치 후, 설정 파일을 자동으로 생성할 수 있습니다.

npx playwright install
npx playwright test --config

설정 파일(playwright.config.js 또는 playwright.config.ts)은 브라우저 종류, 테스트 폴더 위치, 보고서(Reporter) 설정 등 다양한 옵션을 지정할 수 있습니다.

3.4 기본 테스트 코드 예시

아래 예시는 간단한 Google 검색 페이지 테스트 시나리오입니다.

// tests/example.spec.js
const { test, expect } = require('@playwright/test');

test('구글 검색 테스트', async ({ page }) => {
  // 구글 페이지 접속
  await page.goto('https://www.google.com');

  // 검색어 입력
  const searchBox = page.getByRole('combobox');
  await searchBox.fill('Playwright');
  await searchBox.press('Enter');

  // 결과 페이지 확인
  await expect(page).toHaveURL(/.*search.*/);
});
  • page.goto: 해당 URL로 페이지를 이동합니다.
  • page.getByRole: 접근성 역할(Role)을 활용해 요소를 찾습니다. (Playwright 1.30 버전 이상에서 사용 가능)
  • fill, press: 폼 입력 및 키보드 작업을 수행합니다.
  • expect(page).toHaveURL: 현재 페이지 URL이 특정 조건과 일치하는지 확인(어썰션)합니다.

3.5 테스트 실행

npx playwright test
  • --headed 옵션을 사용하면 실제 브라우저 창을 띄우는 모드로 테스트를 진행합니다.
  • --project 옵션을 통해 특정 브라우저만 테스트하거나, 여러 브라우저에서 동시에 테스트를 실행할 수 있습니다.
npx playwright test --headed --project=chromium

4. 테스트 작성 시 주의 사항

  1. 페이지 로드 대기
    Playwright는 내부적으로 자동 대기를 해주지만, 일부 상황(예: 느린 네트워크 환경, 사이트 로딩 지연 등)에서는 필요에 따라 추가 대기 함수를 설정할 수 있습니다.
  2. 요소 검색 전략
    CSS 셀렉터, 텍스트, 접근성 역할(Role) 등 다양한 방식으로 요소를 찾을 수 있습니다. 일관된 규칙을 미리 정해두면 유지보수가 쉽습니다.
  3. 테스트 격리
    테스트 간 독립성을 위해, 각 테스트 케이스가 끝난 후 context나 page를 재시작하도록 구성하는 것이 좋습니다.
  4. 스냅샷 및 보고서
    Playwright는 기본적으로 스크린샷, 동영상 녹화, HTML 보고서 기능을 지원합니다. CI 환경에서 테스트 결과를 확인할 때 유용합니다.

5. 확장 기능 및 커뮤니티

  • Playwright Library
    @playwright/test 외에도 Playwright API 전체를 사용해 자신만의 테스트 프레임워크를 구성할 수 있습니다.
  • 커뮤니티 & 문서
    GitHub 이슈와 공식 문서(https://playwright.dev/)가 활발히 운영되고 있어, 최신 정보와 버그 패치를 빠르게 확인할 수 있습니다.

6. 결론

Playwright는 웹 자동화와 E2E 테스트 분야에서 빠르게 성장하고 있는 강력한 툴입니다. 손쉬운 멀티 브라우저 지원과 간편한 API, CI/CD 파이프라인 연동이 매력 포인트죠. 웹 서비스 품질을 높이기 위해 테스트 자동화 도입을 고려 중이라면, Playwright를 한 번 시도해 보시는 것을 추천드립니다!

저작자표시 비영리 동일조건