<aside> 📎

</aside>

1. Playwright 설치하기

브라우저 환경 테스트 툴 비교하기 에 이어 Playwright를 설치해봅시다!

1. 먼저 Playwright 설치

pnpm add -D @playwright/test

1. Playwright 브라우저 설치

Playwright가 테스트를 실행할 브라우저들을 설치하는 필수 단계입니다.

설치 가능한 브라우저 옵션은 https://playwright.dev/docs/browsers#install-browsers 에서 더 살펴볼 수 있습니다!

# 모든 브라우저 설치
pnpm dlx playwright install

# 또는 특정 브라우저만 설치
pnpm dlx playwright install chromium firefox

1. package.json에 스크립트 추가

{
  "scripts": {
    // 기존 스크립트들...
    "test": "vitest",
    "test:ui": "vitest --ui",
    // Playwright 테스트 스크립트 추가
    "test:e2e": "playwright test",
    "test:e2e:ui": "playwright test --ui",
    "test:e2e:debug": "playwright test --debug"
  }
}

1. playwright.config.ts 설정

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

const config: PlaywrightTestConfig = {
  testDir: './src/tests/e2e',
  workers: 5,
  fullyParallel: true,
  timeout: 180000,
  reporter: 'html',
  use: {
    baseURL: '<http://localhost:5173/>',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
};

export default config;

1. (선택) VS Code 사용자라면 Playwright Test for VSCode 확장 프로그램 설치 추천

pnpm dlx @playwright/test install-deps

1. 주요 명령어

UI 모드로 실행 시 테스트 과정(스크린샷)과 결과를 시각적으로 확인할 수 있어 UI 모드 추천드립니다.

# 테스트 실행
pnpm test:e2e

# UI 모드로 실행
pnpm test:e2e:ui

# 디버그 모드로 실행
pnpm test:e2e:debug

# 특정 브라우저에서만 실행
pnpm test:e2e --project=chromium

2. Playwright 기본 사용법