Playwright로 웹 애플리케이션 E2E 테스트 환경 구축 및 자동화 심층 분석

Playwright를 활용한 웹 애플리케이션 E2E 테스트 환경 구축부터 실제 테스트 자동화 구현까지 심층 가이드를 제공합니다. 안정적이고 효율적인 테스트 전략으로 개발 워크플로우를 개선하세요.

웹 애플리케이션 개발에서 사용자 경험의 중요성은 아무리 강조해도 지나치지 않습니다. 사용자가 실제로 애플리케이션을 어떻게 사용하는지, 그리고 모든 기능이 기대한 대로 동작하는지 확인하는 과정은 매우 중요합니다. 하지만 복잡해지는 웹 환경과 다양한 브라우저 호환성 문제로 인해, 수동 테스트만으로는 모든 시나리오를 커버하고 품질을 보장하기란 거의 불가능에 가깝습니다. 이러한 배경 속에서 E2E(End-to-End) 테스트 자동화는 개발 및 QA 팀의 필수적인 역량으로 자리 잡고 있습니다.

E2E 테스트는 사용자의 관점에서 애플리케이션의 시작부터 끝까지 전체 흐름을 검증합니다. 이는 프론트엔드와 백엔드, 데이터베이스, 네트워크 등 모든 구성 요소가 통합된 상태에서 정상적으로 동작하는지 확인하는 과정입니다. 전통적인 E2E 테스트 도구들은 설정의 복잡성, 테스트 실행 속도, 그리고 다양한 브라우저 지원 문제로 인해 개발자들에게 적지 않은 부담을 주었습니다. 이러한 한계를 극복하기 위해 등장한 것이 바로 Playwright입니다.

본 가이드에서는 Playwright를 활용하여 웹 애플리케이션의 E2E 테스트 환경을 구축하고, 실제 테스트를 자동화하는 방법을 심층적으로 다룹니다. Playwright의 강력한 기능과 실제 사용 예시를 통해, 여러분의 개발 워크플로우를 더욱 견고하고 효율적으로 만드는 데 기여할 수 있을 것으로 판단됩니다.

📑 목차

• Playwright란 무엇인가?: E2E 테스트의 새로운 표준
• 멀티 브라우저 및 플랫폼 지원
• 자동 대기(Auto-waiting) 및 안정성
• 강력한 API 및 개발자 경험
• Playwright 개발 환경 구축: 시작하기
• Node.js 및 npm 설치 확인
• Playwright 설치 및 초기 설정
• 기본 E2E 테스트 시나리오 작성: 핵심 API 활용
• 페이지 탐색 및 요소 상호작용
• 어설션(Assertion)을 통한 결과 검증
• 테스트 자동화 및 관리 전략: 효율성 극대화
• 테스트 러너 및 보고서 활용
• CI/CD 파이프라인 통합 방안
• Playwright의 고급 기능 활용: 견고한 테스트를 위한 심화
• 비동기 작업 및 네트워크 요청 제어
• 인증 및 세션 관리
• Visual Regression Testing 도입
• Playwright vs. Selenium vs. Cypress: 비교 분석
• 결론 및 요약: Playwright로 완성하는 E2E 테스트

Image by analogicus on Pixabay

Playwright란 무엇인가?: E2E 테스트의 새로운 표준

Playwright는 Microsoft에서 개발한 오픈 소스 Node.js 기반의 웹 자동화 라이브러리입니다. 웹 애플리케이션의 E2E 테스트, UI 테스트, 웹 스크래핑 등 다양한 용도로 활용될 수 있습니다. Playwright는 특히 다음과 같은 핵심 강점으로 인해 E2E 테스트 분야에서 빠르게 주목받고 있습니다.

멀티 브라우저 및 플랫폼 지원

Playwright는 단일 API로 Chromium (Google Chrome, Microsoft Edge), Firefox (Mozilla Firefox), WebKit (Apple Safari) 등 주요 웹 브라우저를 모두 지원합니다. 이는 테스트 코드를 한 번 작성하면 모든 주요 브라우저에서 실행할 수 있음을 의미하며, 브라우저 호환성 테스트에 드는 노력을 획기적으로 줄여줍니다. 또한, Windows, macOS, Linux 등 다양한 운영 체제에서 일관된 테스트 환경을 제공합니다.

자동 대기(Auto-waiting) 및 안정성

기존 테스트 도구들이 요소를 찾거나 액션을 수행하기 전에 수동으로 대기 시간을 설정해야 했던 것과 달리, Playwright는 자동 대기 메커니즘을 내장하고 있습니다. 예를 들어, 클릭 액션을 수행하기 전에 요소가 DOM에 존재하고, 표시되며, 활성화되고, 스크롤 가능하며, 다른 요소에 가려지지 않았는지 등을 자동으로 확인합니다. 이러한 자동 대기 기능은 테스트의 불안정성(flakiness)을 크게 줄여주며, 개발자들이 예측 가능한 테스트를 작성할 수 있도록 돕습니다.

강력한 API 및 개발자 경험

Playwright는 매우 직관적이고 강력한 API를 제공합니다. 페이지 탐색, 요소 상호작용 (클릭, 입력, 드래그 앤 드롭), 네트워크 요청 가로채기 및 수정, 파일 업로드/다운로드, 스크린샷 캡처, 비디오 녹화 등 웹 애플리케이션 테스트에 필요한 거의 모든 기능을 지원합니다. TypeScript 지원과 더불어 개발자 도구와의 연동성 또한 우수하여, 개발자들이 효율적으로 테스트 코드를 작성하고 디버깅할 수 있도록 돕습니다.

Playwright 개발 환경 구축: 시작하기

Playwright를 시작하기 위한 환경 설정은 매우 간단합니다. Node.js 환경이 준비되어 있다면 몇 가지 명령어로 즉시 테스트를 시작할 수 있습니다.

Node.js 및 npm 설치 확인

Playwright는 Node.js 기반으로 동작하므로, 시스템에 Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. 터미널에서 다음 명령어를 실행하여 설치 여부를 확인할 수 있습니다.

node -v
npm -v

만약 설치되어 있지 않다면, Node.js 공식 웹사이트에서 권장 버전을 다운로드하여 설치할 수 있습니다.

Playwright 설치 및 초기 설정

프로젝트 디렉토리 내에서 Playwright를 설치하고 초기화하는 가장 쉬운 방법은 Playwright CLI 도구를 사용하는 것입니다. 다음 명령어를 실행하면 Playwright가 자동으로 설치되고, 예제 테스트 파일 및 설정 파일이 생성됩니다.

npm init playwright@latest my-playwright-project --yes

이 명령어는 my-playwright-project라는 새 디렉토리를 생성하고, 그 안에 Playwright와 필요한 브라우저 바이너리(Chromium, Firefox, WebKit)를 설치합니다. 또한, playwright.config.ts 설정 파일과 tests 디렉토리에 예제 테스트 파일을 자동으로 생성합니다.

설치 과정에서 다음 옵션을 선택할 수 있습니다:

• TypeScript or JavaScript (기본값: TypeScript)
• tests 디렉토리 위치 (기본값: tests)
• GitHub Actions 워크플로우 추가 여부

설치가 완료되면 playwright.config.ts 파일을 통해 테스트 환경 설정을 커스터마이징할 수 있습니다. 예를 들어, 테스트 타임아웃, 병렬 실행 개수, 기본 브라우저 등을 설정할 수 있습니다.

기본 E2E 테스트 시나리오 작성: 핵심 API 활용

Playwright를 이용하여 기본적인 E2E 테스트 시나리오를 작성하는 방법을 알아봅니다. 사용자 로그인 시나리오를 예시로 들어 설명합니다.

페이지 탐색 및 요소 상호작용

Playwright의 page 객체는 브라우저 페이지와의 모든 상호작용을 담당합니다. 웹 페이지로 이동하고, 요소를 찾아 상호작용하는 기본 패턴은 다음과 같습니다.

// tests/login.spec.ts
import { test, expect } from '@playwright/test';

test('사용자는 올바른 자격 증명으로 로그인할 수 있다', async ({ page }) => {
  // 1. 로그인 페이지로 이동
  await page.goto('https://example.com/login'); // 실제 로그인 페이지 URL로 변경 필요

  // 2. 사용자 이름 입력 필드 찾고 값 입력
  await page.fill('input[name="username"]', 'testuser');

  // 3. 비밀번호 입력 필드 찾고 값 입력
  await page.fill('input[name="password"]', 'testpassword');

  // 4. 로그인 버튼 클릭
  await page.click('button[type="submit"]');

  // 5. 로그인 성공 후 리다이렉션된 페이지 확인
  await expect(page).toHaveURL('https://example.com/dashboard'); // 실제 대시보드 URL로 변경 필요
  await expect(page.locator('h1')).toHaveText('환영합니다, testuser님!');
});

위 코드에서 page.goto()는 특정 URL로 이동하며, page.fill()은 CSS 셀렉터를 사용하여 요소를 찾고 값을 입력합니다. page.click()은 버튼과 같은 클릭 가능한 요소를 활성화합니다. Playwright는 CSS 셀렉터 외에도 XPath, 텍스트, 역할(role), 대체 텍스트(alt text) 등 다양한 방식으로 요소를 찾을 수 있도록 지원하여 유연한 요소 선택을 가능하게 합니다.

어설션(Assertion)을 통한 결과 검증

테스트의 핵심은 특정 액션 후 애플리케이션의 상태가 기대한 대로 변경되었는지 검증(assertion)하는 것입니다. Playwright는 @playwright/test 패키지를 통해 Jest와 유사한 expect API를 제공합니다.

• expect(page).toHaveURL(url): 현재 페이지의 URL이 특정 URL과 일치하는지 검증합니다.
• expect(locator).toHaveText(text): 특정 요소의 텍스트 콘텐츠가 일치하는지 검증합니다.
• expect(locator).toBeVisible(): 특정 요소가 화면에 보이는지 검증합니다.
• expect(locator).toBeEnabled(): 특정 요소가 활성화되어 있는지 검증합니다.

이러한 어설션 함수들은 Playwright의 자동 대기 메커니즘과 결합되어, 요소가 나타나거나 특정 상태가 될 때까지 기다린 후 검증을 수행하므로 테스트의 신뢰도를 높여줍니다.

Image by Alexandra_Koch on Pixabay

테스트 자동화 및 관리 전략: 효율성 극대화

테스트 스크립트를 작성하는 것만큼 중요한 것은 이들을 효율적으로 실행하고 관리하는 것입니다. Playwright는 이러한 과정을 지원하는 다양한 기능을 제공합니다.

테스트 러너 및 보고서 활용

Playwright는 내장된 테스트 러너를 통해 테스트를 실행합니다. 터미널에서 다음 명령어를 사용하여 모든 테스트를 실행할 수 있습니다.

npx playwright test

특정 브라우저에서만 테스트를 실행하거나, 특정 파일만 실행하는 등 다양한 옵션을 사용할 수 있습니다.

npx playwright test --project=chromium // Chromium에서만 실행
npx playwright test tests/login.spec.ts // 특정 파일만 실행
npx playwright test --ui // Playwright UI 모드 실행 (테스트 탐색 및 디버깅 용이)

테스트 실행 후, Playwright는 기본적으로 상세한 HTML 보고서를 생성합니다. 이 보고서는 어떤 테스트가 실패했는지, 실패한 테스트의 스크린샷, 비디오, 스텝별 로그 등 풍부한 정보를 제공하여 디버깅 시간을 단축시킵니다.

npx playwright show-report

이 명령어를 실행하면 웹 브라우저에서 테스트 보고서를 확인할 수 있습니다.

CI/CD 파이프라인 통합 방안

지속적 통합/지속적 배포(CI/CD) 파이프라인에 E2E 테스트를 통합하는 것은 개발 프로세스의 핵심입니다. Playwright 테스트를 CI/CD에 통합하면, 코드 변경이 발생할 때마다 자동으로 테스트를 실행하여 버그를 조기에 발견하고 회귀(regression)를 방지할 수 있습니다. 대부분의 CI/CD 도구(Jenkins, GitHub Actions, GitLab CI 등)는 Node.js 환경을 지원하므로, Playwright를 쉽게 통합할 수 있습니다.

예를 들어, GitHub Actions 워크플로우는 다음과 같이 구성될 수 있습니다:

# .github/workflows/playwright.yml
name: Playwright Tests

on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]

jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: 18
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: always()
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

이 워크플로우는 코드가 main 브랜치에 푸시되거나 풀 리퀘스트가 생성될 때마다 Playwright 테스트를 실행하고, 테스트 보고서를 아티팩트로 저장합니다. 이를 통해 자동화된 품질 보증 프로세스를 구축할 수 있습니다.

Playwright의 고급 기능 활용: 견고한 테스트를 위한 심화

Playwright는 단순한 웹 상호작용을 넘어, 복잡한 테스트 시나리오를 위한 다양한 고급 기능을 제공합니다.

비동기 작업 및 네트워크 요청 제어

현대 웹 애플리케이션은 비동기적으로 데이터를 로드하고, API 요청을 통해 서버와 통신합니다. Playwright는 이러한 네트워크 요청을 가로채고(intercept) 수정(modify)할 수 있는 강력한 기능을 제공합니다. 이를 통해 다음과 같은 시나리오를 구현할 수 있습니다.

• API Mocking: 특정 API 요청에 대해 가짜 응답을 반환하여 백엔드 의존성 없이 프론트엔드 테스트를 진행할 수 있습니다.
• 네트워크 지연 시뮬레이션: 네트워크 속도가 느린 환경에서의 애플리케이션 동작을 테스트할 수 있습니다.
• 데이터 검증: 특정 API 요청의 페이로드나 응답을 검증하여 백엔드와의 통합 문제를 미리 발견할 수 있습니다.

test('API 응답을 모킹하여 특정 시나리오 테스트', async ({ page }) => {
  await page.route('**/api/users', async route => {
    const json = [{ id: 1, name: 'Mock User' }];
    await route.fulfill({ json });
  });

  await page.goto('https://example.com/users');
  await expect(page.locator('text=Mock User')).toBeVisible();
});

인증 및 세션 관리

대부분의 웹 애플리케이션은 로그인 과정을 거쳐야 접근할 수 있는 페이지를 가지고 있습니다. 매번 테스트마다 로그인 과정을 반복하는 것은 비효율적이며, 테스트 시간을 늘립니다. Playwright는 인증 상태를 저장하고 재사용하는 기능을 제공하여 이러한 문제를 해결합니다.

// global-setup.ts
import { chromium, expect } from '@playwright/test';

async function globalSetup() {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/login');
  await page.fill('input[name="username"]', 'admin');
  await page.fill('input[name="password"]', 'adminpass');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL('https://example.com/dashboard');

  // 인증 상태를 파일로 저장
  await page.context().storageState({ path: 'storageState.json' });
  await browser.close();
}

export default globalSetup;

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  globalSetup: require.resolve('./global-setup'), // 전역 설정 파일 지정
  use: {
    storageState: 'storageState.json', // 저장된 인증 상태 사용
  },
  // ... 기타 설정
});

globalSetup을 통해 한 번 로그인한 후, 그 상태를 storageState.json 파일로 저장합니다. 이후 모든 테스트는 이 저장된 상태를 사용하여 로그인 과정을 건너뛰고 바로 인증된 페이지에서 테스트를 시작할 수 있습니다. 이는 테스트 실행 시간을 크게 단축시키고, 테스트 스크립트를 더욱 간결하게 만듭니다.

Visual Regression Testing 도입

UI 변경으로 인해 의도치 않은 시각적 회귀가 발생하는 것은 흔한 일입니다. Playwright는 스크린샷 비교 기반의 Visual Regression Testing 기능을 내장하고 있어, UI 변경 사항을 자동으로 감지하고 시각적 버그를 예방할 수 있습니다.

test('페이지 UI가 예상과 일치하는지 확인', async ({ page }) => {
  await page.goto('https://example.com/dashboard');
  // 현재 페이지의 스크린샷을 기준 이미지와 비교
  await expect(page).toHaveScreenshot('dashboard.png');
});

toHaveScreenshot() 어설션을 사용하면, 첫 실행 시 기준 스크린샷이 생성됩니다. 이후 실행에서는 현재 스크린샷과 기준 스크린샷을 비교하여 픽셀 단위의 차이를 감지하고, 차이가 발생하면 테스트를 실패 처리합니다. 이는 시각적 품질을 보장하는 데 매우 효과적인 방법입니다.

Image by lukasmilan on Pixabay

Playwright vs. Selenium vs. Cypress: 비교 분석

Playwright는 E2E 테스트 분야의 강력한 도구이지만, 이전에 널리 사용되던 Selenium이나 Cypress와 같은 다른 프레임워크와 비교하여 어떤 특징을 가지는지 이해하는 것이 중요합니다. 각 도구의 장단점을 비교하여 여러분의 프로젝트에 가장 적합한 선택을 할 수 있도록 돕습니다.

특징	Playwright	Selenium WebDriver	Cypress
지원 브라우저	Chromium, Firefox, WebKit (Safari)	모든 주요 브라우저 (드라이버 필요)	Chromium 기반 브라우저 (Chrome, Edge), Firefox
지원 언어	TypeScript, JavaScript, Python, Java, C#	Java, Python, C#, Ruby, JavaScript 등 다수	JavaScript, TypeScript
아키텍처	브라우저와 직접 통신 (Node.js 프로세스 내)	WebDriver 프로토콜을 통한 브라우저 통신	브라우저 내에서 직접 실행 (Node.js 프로세스 통제)
자동 대기	강력한 내장 자동 대기 기능	명시적/암시적 대기 설정 필요	내장 자동 대기 기능
테스트 실행 속도	매우 빠름 (브라우저와 직접 통신, 병렬 실행 용이)	드라이버 오버헤드로 인해 상대적으로 느릴 수 있음	빠름 (브라우저 내 실행)
네트워크 제어	강력한 API 제공 (요청 가로채기, Mocking)	일부 기능 제공하나 복잡	API Mocking 등 강력한 기능 제공
개발자 경험	뛰어남 (직관적인 API, 코드 생성기, UI 모드)	각 언어별 바인딩에 따라 다름, 설정 복잡	뛰어남 (테스트 러너 UI, 실시간 리로드)
CI/CD 통합	매우 용이 (경량, 컨테이너 환경 친화적)	용이하나, 드라이버 관리 필요	용이 (Docker 이미지 제공)

위 비교를 통해 알 수 있듯이, Playwright는 특히 멀티 브라우저 지원, 강력한 자동 대기 메커니즘, 그리고 뛰어난 개발자 경험 측면에서 두각을 나타냅니다. Selenium은 광범위한 언어와 브라우저를 지원하지만, 설정 복잡성과 자동 대기 부재로 인해 높은 유지보수 비용이 발생할 수 있습니다. Cypress는 뛰어난 개발자 경험을 제공하지만, 지원하는 브라우저가 Playwright보다 제한적이며, 브라우저 내에서 실행되는 아키텍처 때문에 일부 시나리오(예: 별도의 탭/창 제어)에 제약이 있을 수 있습니다. 따라서 Playwright는 현대 웹 애플리케이션의 E2E 테스트 자동화를 위한 강력하고 유연한 선택지로 판단됩니다.

결론 및 요약: Playwright로 완성하는 E2E 테스트

웹 애플리케이션의 복잡성이 증가함에 따라, 견고하고 신뢰할 수 있는 E2E 테스트 환경 구축은 개발 프로젝트의 성공을 위한 필수 요소가 되었습니다. Playwright는 그 강력한 기능과 효율적인 아키텍처를 통해 이러한 요구사항을 충족시키며, E2E 테스트 자동화의 새로운 표준으로 자리매김하고 있습니다.

본 가이드에서는 Playwright의 기본 개념부터 환경 설정, 핵심 API를 활용한 테스트 작성, 그리고 CI/CD 통합을 통한 자동화 전략까지 전반적인 과정을 살펴보았습니다. 특히 멀티 브라우저 지원, 자동 대기 메커니즘, 강력한 네트워크 제어, 그리고 뛰어난 개발자 경험은 Playwright가 다른 테스트 프레임워크와 차별화되는 주요 강점입니다. 또한, Visual Regression Testing과 같은 고급 기능을 통해 시각적 품질까지 보장할 수 있어, 개발 워크플로우 전반의 안정성과 생산성을 향상시키는 데 크게 기여할 수 있습니다.

Playwright를 도입함으로써, 개발 팀은 더 빠르고 안정적으로 웹 애플리케이션을 테스트하고, 버그를 조기에 발견하며, 최종 사용자에게 고품질의 서비스를 제공할 수 있을 것으로 판단됩니다. 이 가이드가 여러분의 Playwright 여정에 유용한 로드맵이 되기를 바랍니다. Playwright를 활용하여 더욱 견고하고 효율적인 웹 개발 환경을 구축하시길 기대합니다.

Playwright를 활용한 E2E 테스트 환경 구축에 대해 궁금한 점이 있으시거나, 자신만의 팁이 있다면 댓글로 공유해 주세요!

📌 함께 읽으면 좋은 글

• [기술 리뷰] htmx로 SPA 없이 동적 웹 개발 혁신: 새로운 접근 방식 심층 분석
• [개발 책 리뷰] 클린 아키텍처 실전 적용 후기: 견고하고 유연한 소프트웨어 설계 원칙
• [튜토리얼] Playwright로 웹 애플리케이션 E2E 테스트 환경 구축 및 자동화 가이드

이 글이 도움이 되셨다면 공감(♥)과 댓글로 응원해 주세요!
궁금한 점이나 다루었으면 하는 주제가 있다면 댓글로 남겨주세요.