Skip to content
Search

Playwright

lastmod 2026-03-27created 2020-08-1919 edits

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.

Since Playwright 1.22.0

  • Web component testing with Playwright Test
    • All features (parallelization, emulation, debugging, etc.) available
    • Supports React, Vue.js, Svelte
    • Automatically generates index.html for component tests
    • Components are actually loaded in the browser, while tests run in Node.js
    • Uses Vite
  • Added .toHaveScreenshot() assert
  • Can select by ARIA role/attr, etc.

Usage

Install the package 

npm install --save-dev @playwright/test

Install browsers 

npx playwright install chromium

Run tests 

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,
  },
});

Recording actions with Playwright

To use the record feature, one of Playwright's biggest advantages, enter the command below. The wikipedia.org web page opens, and the actions the user performs are automatically written out in python, javascript, etc. You can then edit the parts you want and write code quickly. 

playwright codegen wikipedia.org

/e2e vs /src/e2e

Let me check the common practice for the E2E test directory location. 

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

Root-level placement is more common. The current project structure (e2e/) matches standard practice. 

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

Pros:

  • Clearly separates application source code from test code
  • Approach recommended by the official Playwright documentation and community
  • Test code is not included in build output
  • Used by most frameworks (React, Angular, Vue)

See also

Favorite site

author Zer0 sitemap