出力構造:

tests/e2e/
├── <flow>.spec.ts     # テストファイル
├── fixtures/
│   └── <flow>.json    # テストデータ
└── pages/
    └── <flow>.page.ts # Page Object

テストテンプレート:

import { test, expect } from '@playwright/test';

test.describe('<Flow>', () => {
  test('should complete flow', async ({ page }) => {
    // Step 1: Navigate
    await page.goto('/');
    
    // Step 2: Action
    await page.click('[data-testid="button"]');
    
    // Step 3: Assert
    await expect(page.locator('.success')).toBeVisible();
  });
});

▶️ テスト実行 (REQ-E2E-002)

WHEN /e2e run [flow] 実行
DO Playwrightでテスト実行

オプション	説明
`--headed`	ブラウザ表示
`--debug`	デバッグモード
`--trace`	トレース記録
`--browser <name>`	ブラウザ指定

# 全テスト
npx playwright test

# 特定フロー
npx playwright test tests/e2e/login.spec.ts

# デバッグ
npx playwright test --debug

📊 レポート (REQ-E2E-003)

WHEN テスト完了
DO レポート生成

📊 E2E Test Report
━━━━━━━━━━━━━━━━━━━━━━━━
Total:   10 tests
Passed:  8 ✅
Failed:  2 ❌
Skipped: 0

Duration: 45.2s
━━━━━━━━━━━━━━━━━━━━━━━━

Failed Tests:
1. login.spec.ts > should login
   Error: Timeout waiting for selector
   Screenshot: playwright-report/login-1.png

2. checkout.spec.ts > should pay
   Error: Element not found
   Screenshot: playwright-report/checkout-1.png

HTMLレポート:

npx playwright show-report

📁 設定

playwright.config.ts:

export default defineConfig({
  testDir: './tests/e2e',
  timeout: 30000,
  retries: 2,
  use: {
    baseURL: 'http://localhost:3000',
    screenshot: 'only-on-failure',
    trace: 'retain-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
  ],
});

トレーサビリティ

REQ-E2E-001: E2E Test Generation
REQ-E2E-002: E2E Test Execution
REQ-E2E-003: E2E Report

e2e-runner

E2E Runner

📌 コマンド

🎬 テスト生成 (REQ-E2E-001)