Skip to content

Playwright

Playwright enables reliable end-to-end testing for modern web apps.

Features

  • Any browser • Any platform • One API
  • Cross-browser. Playwright supports all modern rendering engines, including Chromium, WebKit and Firefox.
  • Cross-platform. Test on Windows, Linux and macOS, locally or on CI, headless or headed.
  • Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java.
  • Test Mobile Web. Native mobile emulation of Google Chrome for Android and Mobile Safari. Same rendering engine works on your Desktop and in the Cloud.

Playwright 1.22.0 이후

  • Playwright Test 로 웹 컴포넌트 테스트
    • 모든 기능(병렬화, 에뮬레이션, 디버깅 등) 사용 가능
    • React, Vue.js, Svelte 지원
    • 컴포넌트 테스트용 index.html을 자동 생성
    • 브라우저가 실제로 로딩하고, 테스트는 Node.js에서 실행
    • Vite 사용
  • .toHaveScreenshot() assert 추가
  • ARIA role/attr 등으로 선택 가능

Usage

패키지 설치 

npm install --save-dev @playwright/test

브라우저 설치 

npx playwright install chromium

테스트 진행 

npx playwright test

Config 

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

/**
 * Playwright E2E 테스트 설정
 */
export default defineConfig({
  testDir: './e2e',
  // 테스트 파일 패턴
  testMatch: '**/*.spec.ts',
  // 최대 실행 시간 (밀리초)
  timeout: 30 * 1000,
  // 각 테스트 실행 전 대기 시간 설정
  expect: {
    timeout: 5000,
  },
  // 병렬 실행 비활성화 (인증 플로우 테스트 시 간섭 방지)
  fullyParallel: false,
  // 실패 시 재시도 횟수
  retries: process.env.CI ? 2 : 0,
  // 병렬 worker 수
  workers: process.env.CI ? 1 : 1,
  // 리포터 설정
  reporter: [['html', {outputFolder: 'playwright-report'}], ['list']],
  // 브라우저 설정
  use: {
    // 기본 URL (개발 서버 주소)
    baseURL: 'http://localhost:5173',
    // 테스트 실행 추적
    trace: 'on-first-retry',
    // 스크린샷 캡처 (실패 시)
    screenshot: 'only-on-failure',
    // 비디오 녹화 (실패 시)
    video: 'retain-on-failure',
  },

  // 테스트 프로젝트 설정 (여러 브라우저에서 테스트)
  projects: [
    {
      name: 'chromium',
      use: {...devices['Desktop Chrome']},
    },
    // 필요시 다른 브라우저 추가
    // {
    //   name: 'firefox',
    //   use: { ...devices['Desktop Firefox'] },
    // },
    // {
    //   name: 'webkit',
    //   use: { ...devices['Desktop Safari'] },
    // },
  ],

  // 개발 서버 자동 시작 (테스트 실행 전)
  webServer: {
    command: './npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
    timeout: 120 * 1000,
  },
});

Playwright로 액션 녹화

playwright의 최대 장점 중 하나인 record 기능을 쓰기 위해서는 아래 명령어를 입력하면 된다. 그러면 wikipedia.org 웹페이지가 열리게 되고 사용자가 입력한 액션을 python이나 javascript 등으로 알아서 작성해준다. 그 뒤 원하는 부분을 수정해주면 빠르게 코드 작성이 가능하다. 

playwright codegen wikipedia.org

/e2e vs /src/e2e

E2E 테스트 디렉토리 위치에 대한 일반적인 관행을 확인해보겠습니다. 

Web Search("Playwright e2e test directory location best practice 2026 src vs root")

루트 레벨 배치가 더 일반적입니다. 현재 프로젝트 구조(e2e/)가 표준 관행과 일치합니다. 

  프로젝트/
  ├── e2e/                    # 또는 tests/e2e/
  │   ├── *.spec.ts
  │   └── fixtures/
  ├── src/
  ├── playwright.config.ts    # 루트에 위치
  └── package.json

장점:

  • 애플리케이션 소스 코드와 테스트 코드를 명확히 분리
  • Playwright 공식 문서 및 커뮤니티 권장 방식
  • 빌드 결과물에 테스트 코드가 포함되지 않음
  • 대부분의 프레임워크(React, Angular, Vue)에서 사용

See also

Favorite site