Playwright Wrapper

Playwright CLI를 직접 호출하여 브라우저 자동화를 수행합니다.

사용 시나리오

• E2E 테스트 실행
• 웹페이지 스크린샷
• 폼 자동 입력 테스트
• 브라우저 자동화 스크립트

명령어

E2E 테스트 실행

# 전체 테스트
npx playwright test

# 특정 파일
npx playwright test tests/e2e/auth.spec.ts

# UI 모드
npx playwright test --ui

# 헤드리스 모드 (기본)
npx playwright test --headed

스크린샷 촬영

# 단일 페이지 스크린샷
npx playwright screenshot https://example.com screenshot.png

# 전체 페이지
npx playwright screenshot --full-page https://example.com full.png

코드 생성 (녹화)

# 브라우저에서 작업 녹화 → 코드 생성
npx playwright codegen https://example.com

PDF 생성

npx playwright pdf https://example.com page.pdf

테스트 작성 예시

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

test('로그인 테스트', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'password');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL('/dashboard');
});

설정 파일

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

export default defineConfig({
  testDir: './tests/e2e',
  timeout: 30000,
  use: {
    headless: true,
    screenshot: 'only-on-failure',
  },
});

관련 커맨드

| 커맨드 | 용도 | |--------|------| | /check | 테스트 포함 전체 검사 | | /tdd | TDD 워크플로우 |

MCP 플러그인 활성화 (필요시)

대화형 브라우저 제어가 필요한 경우:

claude plugin enable playwright@claude-plugins-official
# 세션 재시작 필요