Playwrightを使用してE2Eテストを生成・実行。クリティカルユーザーフローの検証。
要約: PlaywrightでE2Eテストを生成・実行。テスト結果のレポートとスクリーンショット管理。
| コマンド | 説明 |
|---|---|
/e2e generate <flow> |
テスト生成 |
/e2e run [flow] |
テスト実行 |
/e2e report |
レポート表示 |
WHEN /e2e generate <flow> 実行
DO テストファイルを生成
出力構造:
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();
});
});
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
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'] } },
],
});
