Claude Code × Playwright で E2E テストを本番運用に乗せる — 落とし穴と導入の判断基準

// Claude Codeに提示するプロンプト例
「
以下のスクリーンショットに映っているEコマースの商品詳細ページについて、
重要なユーザーインタラクションをテストするPlaywrightテストコードを生成してください。
 
要素の構成:
- 商品画像（左側スライダー）
- 商品情報パネル（右側）
  - 商品名（H1）
  - 価格表示
  - 星評価（5つ星）
  - 「カートに追加」ボタン
  - 数量セレクタ
- リビュー一覧セクション
 
テストシナリオ:
1. ページロード時に商品情報が表示されること
2. 画像スライダーが正常に動作すること
3. 数量を変更してカートに追加できること
4. 価格計算が正確であること
5. レビューセクションまでスクロールできること
」

// 自動生成されたテストコード例
import { test, expect } from '@playwright/test';
import { ProductDetailPage } from '../pages/ProductDetailPage';
 
test.describe('商品詳細ページ', () => {
  let page: ProductDetailPage;
 
  test.beforeEach(async ({ page: playwrightPage }) => {
    page = new ProductDetailPage(playwrightPage);
    await page.goto('/products/123');
  });
 
  test('ページロード時に商品情報が表示される', async () => {
    await expect(page.productName).toBeVisible();
    await expect(page.productPrice).toBeVisible();
    await expect(page.ratingStars).toBeVisible();
  });
 
  test('画像スライダーが正常に動作する', async () => {
    const initialImage = await page.currentProductImage.getAttribute('src');
    await page.nextImageButton.click();
    await page.page.waitForTimeout(300); // アニメーション完了待機
    const nextImage = await page.currentProductImage.getAttribute('src');
    expect(initialImage).not.toBe(nextImage);
  });
 
  test('数量を変更してカートに追加できる', async () => {
    await page.quantityInput.fill('3');
    await page.addToCartButton.click();
    await expect(page.cartNotification).toContainText('カートに追加されました');
 
    // カート内の数量を検証
    const expectedPrice = 100 * 3; // 単価 × 数量
    await expect(page.totalPrice).toContainText(String(expectedPrice));
  });
 
  test('レビューセクションまでスクロールできる', async () => {
    await page.reviewsSection.scrollIntoViewIfNeeded();
    await expect(page.reviewsSection).toBeInViewport();
    await expect(page.reviewsList).toHaveCount(/\d+/); // 複数のレビューが存在
  });
});

// インタラクティブ要素の自動検出例
「
このEコマースサイトのナビゲーションバーには以下の要素が見えます:
- ロゴ（クリッカブル）
- 検索入力フィールド
- カテゴリドロップダウン
- ユーザーメニュー
 
各インタラクティブ要素に対して、期待される振る舞いをテストするコードを生成してください。
」

test('検索フィールドでキーワード検索ができる', async ({ page }) => {
  await page.fill('[data-testid="search-input"]', 'ノートPC');
  await page.press('[data-testid="search-input"]', 'Enter');
 
  // 検索結果ページへの遷移を待機
  await expect(page).toHaveURL(/\/search\?q=ノートPC/);
 
  // 検索結果が表示されることを確認
  const results = await page.locator('[data-testid="search-result"]');
  await expect(results.first()).toBeVisible();
});
 
test('カテゴリドロップダウンが展開される', async ({ page }) => {
  const dropdown = page.locator('[data-testid="category-dropdown"]');
  await dropdown.click();
 
  // ドロップダウンメニューが表示されることを確認
  const menu = page.locator('[data-testid="category-menu"]');
  await expect(menu).toBeVisible();
 
  // メニュー項目がすべて表示されていることを確認
  const items = menu.locator('[role="menuitem"]');
  const count = await items.count();
  expect(count).toBeGreaterThan(0);
});

// Page Objectの自動生成例
// tests/pages/LoginPage.ts
 
import { Page, Locator } from '@playwright/test';
 
export class LoginPage {
  // ページ要素の定義
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;
  readonly errorMessage: Locator;
  readonly rememberMeCheckbox: Locator;
  readonly forgotPasswordLink: Locator;
 
  constructor(page: Page) {
    this.page = page;
    // data-testid属性を最優先で使用
    this.emailInput = page.locator('[data-testid="email-input"]');
    this.passwordInput = page.locator('[data-testid="password-input"]');
    this.loginButton = page.locator('[data-testid="login-button"]');
    this.errorMessage = page.locator('[data-testid="error-message"]');
    this.rememberMeCheckbox = page.locator('[data-testid="remember-me"]');
    this.forgotPasswordLink = page.locator('a:has-text("パスワードを忘れた")');
  }
 
  // ナビゲーション
  async goto() {
    await this.page.goto('/login');
    await this.emailInput.waitFor({ state: 'visible' });
  }
 
  // ユーザーアクション
  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
 
    // ログイン完了を待機
    await this.page.waitForURL(/\/dashboard/);
  }
 
  async loginAndWaitForError(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
 
    // エラーメッセージが表示されるまで待機
    await this.errorMessage.waitFor({ state: 'visible' });
  }
 
  async enableRememberMe() {
    await this.rememberMeCheckbox.check();
  }
 
  async clickForgotPassword() {
    await this.forgotPasswordLink.click();
    await this.page.waitForURL(/\/password-reset/);
  }
 
  // アサーション（検証）メソッド
  async isErrorMessageVisible(): Promise<boolean> {
    return this.errorMessage.isVisible();
  }
 
  async getErrorMessageText(): Promise<string> {
    return this.errorMessage.textContent() || '';
  }
}

// 複雑なデータテーブルのPage Object例
// tests/pages/DataTablePage.ts
 
import { Page, Locator } from '@playwright/test';
 
export class DataTablePage {
  readonly page: Page;
  readonly table: Locator;
  readonly rows: Locator;
  readonly sortButtons: Locator;
  readonly paginationButtons: Locator;
  readonly filterInput: Locator;
  readonly selectAllCheckbox: Locator;
 
  constructor(page: Page) {
    this.page = page;
    this.table = page.locator('[data-testid="data-table"]');
    this.rows = this.table.locator('[data-testid="table-row"]');
    this.sortButtons = this.table.locator('[data-testid="sort-button"]');
    this.paginationButtons = page.locator('[data-testid="pagination-button"]');
    this.filterInput = page.locator('[data-testid="filter-input"]');
    this.selectAllCheckbox = page.locator('[data-testid="select-all"]');
  }
 
  async goto() {
    await this.page.goto('/data-table');
    await this.table.waitFor({ state: 'visible' });
  }
 
  // ソート機能
  async sortByColumn(columnName: string) {
    const button = this.sortButtons.locator(`text=${columnName}`).first();
    await button.click();
 
    // テーブルの再レンダリングを待機
    await this.page.waitForLoadState('networkidle');
  }
 
  // フィルタリング
  async filterByText(text: string) {
    await this.filterInput.fill(text);
    await this.page.waitForLoadState('networkidle');
  }
 
  // ページネーション
  async goToPage(pageNumber: number) {
    const button = this.paginationButtons
      .locator(`text="${pageNumber}"`)
      .first();
    await button.click();
    await this.page.waitForLoadState('networkidle');
  }
 
  // 行データの取得
  async getRowData(rowIndex: number): Promise<string[]> {
    const row = this.rows.nth(rowIndex);
    const cells = row.locator('[data-testid="table-cell"]');
    const count = await cells.count();
 
    const data: string[] = [];
    for (let i = 0; i < count; i++) {
      const text = await cells.nth(i).textContent();
      data.push(text || '');
    }
    return data;
  }
 
  // 複数行の選択
  async selectRows(indices: number[]) {
    for (const index of indices) {
      const checkbox = this.rows
        .nth(index)
        .locator('[data-testid="row-checkbox"]');
      await checkbox.check();
    }
  }
 
  // 行数の取得
  async getRowCount(): Promise<number> {
    return this.rows.count();
  }
}

// tests/visual/homepage.visual.spec.ts
 
import { test, expect } from '@playwright/test';
import { HomePage } from '../pages/HomePage';
 
test.describe('ホームページ ビジュアルテスト', () => {
  test('ホームページの全体ビュー', async ({ page }) => {
    const homePage = new HomePage(page);
    await homePage.goto();
 
    // ページ全体のスクリーンショットを比較
    await expect(page).toHaveScreenshot('homepage-full.png', {
      fullPage: true,
      mask: [
        page.locator('[data-testid="dynamic-banner"]'), // 動的に更新される要素
      ],
    });
  });
 
  test('ヘッダーのビジュアル', async ({ page }) => {
    const homePage = new HomePage(page);
    await homePage.goto();
 
    // 特定の要素のみスクリーンショット
    await expect(page.locator('header')).toHaveScreenshot(
      'header-snapshot.png'
    );
  });
 
  test('モバイルビューのビジュアル', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: { width: 375, height: 812 }, // iPhone SE
    });
    const page = await context.newPage();
    const homePage = new HomePage(page);
 
    await homePage.goto();
    await expect(page).toHaveScreenshot('homepage-mobile.png', {
      fullPage: true,
    });
 
    await context.close();
  });
 
  test('ダークモードのビジュアル', async ({ page }) => {
    await page.emulateMedia({ colorScheme: 'dark' });
    const homePage = new HomePage(page);
    await homePage.goto();
 
    await expect(page).toHaveScreenshot('homepage-dark-mode.png', {
      fullPage: true,
    });
  });
 
  test('ホバー状態のビジュアル', async ({ page }) => {
    const homePage = new HomePage(page);
    await homePage.goto();
 
    // ボタンにホバーして状態を確認
    await page.locator('[data-testid="primary-button"]').hover();
    await expect(page.locator('[data-testid="primary-button"]'))
      .toHaveScreenshot('button-hover-state.png');
  });
});

// 差分許可リストの管理
// playwright.config.ts の拡張設定
 
import { defineConfig } from '@playwright/test';
 
export default defineConfig({
  expect: {
    toHaveScreenshot: {
      // わずかなレンダリング差分を許容（1%以下）
      maxDiffPixels: 100,
      threshold: 0.01,
 
      // 動的要素やモニター依存の要素をマスク
      mask: [
        { x: 0, y: 0, width: 1920, height: 50 }, // 日時表示
      ],
    },
  },
});

// フレーキーテストを自動検出・修復するプロンプト
「
以下のテストが間欠的に失敗しています。失敗率は約15%です:
 
\`\`\`typescript
test('検索結果が表示される', async ({ page }) => {
  await page.goto('/search');
  await page.fill('[data-testid="search-input"]', 'キーワード');
  await page.press('[data-testid="search-input"]', 'Enter');
 
  const results = page.locator('[data-testid="search-result"]');
  await expect(results.first()).toBeVisible();
});
\`\`\`
 
フレーキーの原因を特定し、修復されたテストコードを生成してください。
」

// 修復されたテストコード
test('検索結果が表示される', async ({ page }) => {
  await page.goto('/search');
 
  // ページが完全にロードされるまで待機
  await page.waitForLoadState('networkidle');
 
  const searchInput = page.locator('[data-testid="search-input"]');
  await searchInput.waitFor({ state: 'visible' });
 
  // 入力フィールドがフォーカス可能な状態になるまで待機
  await searchInput.fill('キーワード');
  await page.press('[data-testid="search-input"]', 'Enter');
 
  // 検索結果ページへのナビゲーション完了を待機
  await page.waitForURL(/\/search\?q=/);
 
  // 検索結果が表示されるまで明示的に待機
  const results = page.locator('[data-testid="search-result"]');
 
  // 単なる isVisible() ではなく、複数の条件を確認
  await expect(results).toHaveCount(
    /[1-9]\d*/,  // 1以上の結果が存在
    { timeout: 5000 }
  );
 
  // 最初の結果が実際に相互作用可能であることを確認
  await expect(results.first()).toBeFocused({ timeout: 3000 });
});

// フレーキーテストの分類と修復戦略
 
// 1. ネットワーク待機不足による失敗
// 修復: waitForLoadState('networkidle') を追加
await page.waitForLoadState('networkidle');
 
// 2. アニメーション完了待機不足
// 修復: waitForTimeout の代わりに具体的な条件を待機
await page.locator('[data-testid="modal"]').waitFor({
  state: 'visible'
});
await page.waitForLoadState('domcontentloaded');
 
// 3. 非同期データ読み込み完了の未確認
// 修復: skeletonLoaderが消えるまで待機
await page.waitForSelector(
  '[data-testid="skeleton-loader"]',
  { state: 'hidden' }
);
 
// 4. 複数要素からのランダム選択
// 修復: 条件付き待機で最初の有効な要素を取得
const firstEnabledButton = page
  .locator('[data-testid="action-button"]')
  .first()
  .locator(':not([disabled])');
await firstEnabledButton.click();
 
// 5. 外部APIの遅延レスポンス
// 修復: タイムアウトを適切に設定し、リトライロジックを追加
await expect(page.locator('[data-testid="data"]'))
  .toContainText('期待値', { timeout: 10000 });

#!/usr/bin/env python3
"""複数回の Playwright JSON レポートを突き合わせ、実行間で結果が反転するテストを検出する。"""
import json, sys, glob
from collections import defaultdict
 
def walk(node, out):
    for spec in node.get("specs", []):
        key = f'{spec.get("file","?")}::{spec.get("title","?")}'
        for t in spec.get("tests", []):
            out[key].append(t.get("status", "unknown"))
    for child in node.get("suites", []):
        walk(child, out)
 
def load(path):
    with open(path, encoding="utf-8") as fh:
        data = json.load(fh)
    out = defaultdict(list)
    for suite in data.get("suites", []):
        walk(suite, out)
    return {k: v[0] for k, v in out.items() if v}
 
def main(pattern, threshold):
    paths = sorted(glob.glob(pattern))
    if not paths:
        print(f"レポートが見つかりません: {pattern}")
        return 2
    history = defaultdict(list)
    for p in paths:
        for key, status in load(p).items():
            history[key].append(status)
 
    within, across, stable = [], [], 0
    for key, statuses in history.items():
        seen = set(statuses)
        if "flaky" in seen:
            within.append((key, statuses))
        elif {"expected", "unexpected"} <= seen:
            across.append((key, statuses))
        else:
            stable += 1
 
    total = len(history)
    unstable = len(within) + len(across)
    rate = unstable / total * 100 if total else 0.0
 
    print(f"レポート {len(paths)} 本 / テスト {total} 件")
    print(f"  実行内フレーキー (Playwright が flaky と記録): {len(within)} 件")
    print(f"  実行間フレーキー (単発では常に緑に見える)    : {len(across)} 件")
    print(f"  安定                                          : {stable} 件")
    print(f"  不安定率: {rate:.2f}%  (閾値 {threshold:.2f}%)")
    if across:
        print("\n-- 単発レポートでは検出できなかったテスト --")
        for key, statuses in across:
            print(f"  {key}\n    {' '.join(statuses)}")
    return 1 if rate > threshold else 0
 
if __name__ == "__main__":
    pattern = sys.argv[1] if len(sys.argv) > 1 else "reports/*.json"
    threshold = float(sys.argv[2]) if len(sys.argv) > 2 else 5.0
    sys.exit(main(pattern, threshold))

$ python3 flaky_rate.py "reports/run-1.json" 5.0
レポート 1 本 / テスト 12 件
  実行内フレーキー (Playwright が flaky と記録): 1 件
  実行間フレーキー (単発では常に緑に見える)    : 0 件
  安定                                          : 11 件
  不安定率: 8.33%  (閾値 5.00%)
 
$ python3 flaky_rate.py "reports/*.json" 5.0
レポート 5 本 / テスト 12 件
  実行内フレーキー (Playwright が flaky と記録): 1 件
  実行間フレーキー (単発では常に緑に見える)    : 2 件
  安定                                          : 9 件
  不安定率: 25.00%  (閾値 5.00%)
 
-- 単発レポートでは検出できなかったテスト --
  tests/e2e/locale.spec.ts::日英切替でパスが保持される
    expected unexpected expected unexpected expected
  tests/e2e/article.spec.ts::タグページが200を返す
    expected expected expected expected unexpected

      - name: Aggregate flaky rate across recent runs
        run: |
          python3 scripts/flaky_rate.py "artifacts/reports/*.json" 5.0

# .github/workflows/e2e-tests.yml
 
name: E2E テスト
 
on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main, develop ]
  schedule:
    - cron: '0 2 * * *'  # 毎日午前2時（JST）に実行
 
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x, 20.x]
        browser: [chromium, firefox, webkit]
 
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
 
      - name: Node.js ${{ matrix.node-version }} をセットアップ
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
 
      - name: 依存関係をインストール
        run: npm ci
 
      - name: Playwright ブラウザをインストール
        run: npx playwright install --with-deps ${{ matrix.browser }}
 
      - name: 開発サーバーを起動
        run: |
          npm run build
          npm run dev &
          # サーバーの起動待機
          npx wait-on http://localhost:3000 --timeout 60000
 
      - name: E2E テスト実行 (${{ matrix.browser }})
        run: npx playwright test --project=${{ matrix.browser }}
        env:
          CI: true
          DEBUG: pw:api
 
      - name: テスト結果をアップロード
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report-${{ matrix.browser }}
          path: playwright-report/
          retention-days: 30
 
      - name: JUnit 結果をアップロード
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: junit-results-${{ matrix.browser }}
          path: test-results/junit.xml
 
      - name: テスト失敗時に通知
        if: failure()
        uses: actions/github-script@v6
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: '❌ E2E テストが失敗しました。詳細は Actions タブを確認してください。'
            })
 
  flaky-detection:
    name: フレーキーテスト検出
    runs-on: ubuntu-latest
    if: github.event_name == 'schedule'
 
    steps:
      - uses: actions/checkout@v3
 
      - name: Node.js をセットアップ
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'
          cache: 'npm'
 
      - name: 依存関係をインストール
        run: npm ci
 
      - name: Playwright ブラウザをインストール
        run: npx playwright install --with-deps
 
      - name: 10回連続でテスト実行（フレーキー検出）
        run: |
          for i in {1..10}; do
            echo "実行 $i/10"
            npx playwright test || true
          done
 
      - name: フレーキーテストレポート生成
        if: always()
        run: node scripts/analyze-flaky-tests.js
 
      - name: フレーキーテスト結果をアップロード
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: flaky-test-report
          path: flaky-report.json

// scripts/analyze-flaky-tests.js
 
const fs = require('fs');
const path = require('path');
 
async function analyzeFlakyTests() {
  const resultsDir = 'test-results';
  const resultFiles = fs.readdirSync(resultsDir)
    .filter(f => f.endsWith('.json'));
 
  const testRuns = resultFiles.map(file => {
    const content = fs.readFileSync(
      path.join(resultsDir, file),
      'utf-8'
    );
    return JSON.parse(content);
  });
 
  // テストごとの成功/失敗を集計
  const testStats = new Map();
 
  testRuns.forEach((run, runIndex) => {
    run.suites?.forEach(suite => {
      suite.tests?.forEach(test => {
        const key = `${suite.title}::${test.title}`;
        if (!testStats.has(key)) {
          testStats.set(key, { passed: 0, failed: 0 });
        }
        const stats = testStats.get(key);
        if (test.status === 'passed') {
          stats.passed++;
        } else {
          stats.failed++;
        }
      });
    });
  });
 
  // フレーキーテストを検出（成功と失敗が混在）
  const flakyTests = Array.from(testStats.entries())
    .filter(([, stats]) => stats.passed > 0 && stats.failed > 0)
    .map(([name, stats]) => ({
      name,
      passRate: (stats.passed / (stats.passed + stats.failed) * 100)
        .toFixed(1),
      stats
    }))
    .sort((a, b) => parseFloat(a.passRate) - parseFloat(b.passRate));
 
  const report = {
    timestamp: new Date().toISOString(),
    totalTests: testStats.size,
    flakyTestCount: flakyTests.length,
    flakyTests
  };
 
  fs.writeFileSync(
    'flaky-report.json',
    JSON.stringify(report, null, 2)
  );
 
  console.log(`\n🔍 フレーキーテスト検出結果:`);
  console.log(`合計テスト数: ${report.totalTests}`);
  console.log(`フレーキーテスト数: ${report.flakyTestCount}`);
 
  if (flakyTests.length > 0) {
    console.log('\n⚠️ 検出されたフレーキーテスト:');
    flakyTests.slice(0, 10).forEach(test => {
      console.log(
        `  - ${test.name} (成功率: ${test.passRate}%)`
      );
    });
  }
}
 
analyzeFlakyTests().catch(console.error);

// tests/coverage-analyzer.ts
 
import fs from 'fs';
import { test, expect } from '@playwright/test';
import fetch from 'node-fetch';
 
interface CoverageMetrics {
  totalTests: number;
  passedTests: number;
  failedTests: number;
  passRate: number;
  averageExecutionTime: number;
  criticalPathCoverage: number;
  timestamp: string;
}
 
class CoverageAnalyzer {
  async generateReport(): Promise<CoverageMetrics> {
    const resultsFile = 'test-results/results.json';
 
    if (!fs.existsSync(resultsFile)) {
      throw new Error('テスト結果ファイルが見つかりません');
    }
 
    const results = JSON.parse(fs.readFileSync(resultsFile, 'utf-8'));
 
    let totalTests = 0;
    let passedTests = 0;
    let failedTests = 0;
    let totalTime = 0;
 
    results.suites?.forEach((suite: any) => {
      suite.tests?.forEach((test: any) => {
        totalTests++;
        totalTime += test.duration || 0;
 
        if (test.status === 'passed') {
          passedTests++;
        } else {
          failedTests++;
        }
      });
    });
 
    const metrics: CoverageMetrics = {
      totalTests,
      passedTests,
      failedTests,
      passRate: (passedTests / totalTests * 100),
      averageExecutionTime: totalTime / totalTests,
      criticalPathCoverage: await this.calculateCriticalPathCoverage(),
      timestamp: new Date().toISOString(),
    };
 
    this.saveMetrics(metrics);
    this.generateDashboard(metrics);
 
    return metrics;
  }
 
  private async calculateCriticalPathCoverage(): Promise<number> {
    // 重要な機能パスのカバレッジを計算
    const criticalPaths = [
      'ユーザー認証フロー',
      'ショッピングカート操作',
      '決済処理',
      'ユーザー登録'
    ];
 
    const coveredPaths = 3; // 例
    return (coveredPaths / criticalPaths.length) * 100;
  }
 
  private saveMetrics(metrics: CoverageMetrics): void {
    const historyFile = 'test-results/metrics-history.json';
    let history = [];
 
    if (fs.existsSync(historyFile)) {
      history = JSON.parse(fs.readFileSync(historyFile, 'utf-8'));
    }
 
    history.push(metrics);
 
    // 最新30日分を保持
    history = history.slice(-30);
 
    fs.writeFileSync(historyFile, JSON.stringify(history, null, 2));
  }
 
  private generateDashboard(metrics: CoverageMetrics): void {
    const html = `
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>E2E テストメトリクスダッシュボード</title>
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .metric-card {
          display: inline-block;
          padding: 20px;
          margin: 10px;
          background: #f0f0f0;
          border-radius: 8px;
          min-width: 200px;
        }
        .metric-value {
          font-size: 32px;
          font-weight: bold;
          color: #333;
        }
        .metric-label {
          font-size: 14px;
          color: #666;
          margin-top: 10px;
        }
        .success { color: #4caf50; }
        .failure { color: #f44336; }
      </style>
    </head>
    <body>
      <h1>E2E テストメトリクスダッシュボード</h1>
      <p>更新日時: ${metrics.timestamp}</p>
 
      <div class="metric-card">
        <div class="metric-value">${metrics.totalTests}</div>
        <div class="metric-label">総テスト数</div>
      </div>
 
      <div class="metric-card">
        <div class="metric-value success">${metrics.passedTests}</div>
        <div class="metric-label">成功</div>
      </div>
 
      <div class="metric-card">
        <div class="metric-value failure">${metrics.failedTests}</div>
        <div class="metric-label">失敗</div>
      </div>
 
      <div class="metric-card">
        <div class="metric-value">${metrics.passRate.toFixed(1)}%</div>
        <div class="metric-label">成功率</div>
      </div>
 
      <div class="metric-card">
        <div class="metric-value">${metrics.averageExecutionTime.toFixed(0)}ms</div>
        <div class="metric-label">平均実行時間</div>
      </div>
 
      <div class="metric-card">
        <div class="metric-value">${metrics.criticalPathCoverage.toFixed(1)}%</div>
        <div class="metric-label">重要パスカバレッジ</div>
      </div>
 
      <canvas id="trendChart"></canvas>
      <script>
        // メトリクス推移グラフ（省略）
      </script>
    </body>
    </html>
    `;
 
    fs.writeFileSync('playwright-report/dashboard.html', html);
  }
}
 
export const analyzer = new CoverageAnalyzer();

// tests/fixtures/test-data.ts
 
import { test as base, expect } from '@playwright/test';
 
type TestFixtures = {
  cleanDatabase: void;
  authenticatedUser: { email: string; password: string };
  testProduct: { id: string; name: string };
};
 
export const test = base.extend<TestFixtures>({
  cleanDatabase: async ({}, use) => {
    // テスト前: データベースクリーンアップ
    await resetDatabase();
 
    await use();
 
    // テスト後: クリーンアップ
    await resetDatabase();
  },
 
  authenticatedUser: async ({ page }, use) => {
    // テスト用アカウント作成
    const testUser = {
      email: `test-${Date.now()}@example.com`,
      password: 'TestPassword123!',
    };
 
    // ログイン状態でテスト実行
    await page.goto('/login');
    await page.fill('[data-testid="email"]', testUser.email);
    await page.fill('[data-testid="password"]', testUser.password);
    await page.click('[data-testid="login-button"]');
 
    await use(testUser);
 
    // テスト後: アカウント削除
    await deleteTestUser(testUser.email);
  },
 
  testProduct: async ({}, use) => {
    const product = await createTestProduct({
      name: 'テスト商品',
      price: 1000,
    });
 
    await use(product);
 
    // テスト後: 商品削除
    await deleteTestProduct(product.id);
  },
});
 
async function resetDatabase() {
  // データベースリセット実装
  const response = await fetch('http://localhost:3000/api/test/reset', {
    method: 'POST',
  });
  if (!response.ok) {
    throw new Error('データベースリセット失敗');
  }
}

// playwright.config.ts の運用設定
 
export default defineConfig({
  timeout: 30000, // テストごとの最大実行時間
  expect: {
    timeout: 5000, // assertionのタイムアウト
  },
 
  // リトライ設定（CI環境でのみ有効）
  retries: process.env.CI ? 3 : 0,
 
  // 並列実行設定
  workers: process.env.CI ? 1 : 4,
 
  // 失敗時の自動スクリーンショット
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry',
  },
 
  // グローバルタイムアウト
  globalTimeout: 3600000, // 1時間
});

// tests/utils/test-logger.ts
 
import fs from 'fs';
import { test } from '@playwright/test';
 
export class TestLogger {
  private logFile: string;
 
  constructor(testName: string) {
    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
    this.logFile = `logs/${testName}-${timestamp}.log`;
 
    if (!fs.existsSync('logs')) {
      fs.mkdirSync('logs');
    }
  }
 
  log(message: string, level: 'info' | 'warn' | 'error' = 'info') {
    const timestamp = new Date().toISOString();
    const logEntry = `[${timestamp}] [${level.toUpperCase()}] ${message}\n`;
 
    console.log(logEntry);
    fs.appendFileSync(this.logFile, logEntry);
  }
 
  info(message: string) {
    this.log(message, 'info');
  }
 
  warn(message: string) {
    this.log(message, 'warn');
  }
 
  error(message: string, error?: Error) {
    const errorMessage = error
      ? `${message}: ${error.message}\n${error.stack}`
      : message;
    this.log(errorMessage, 'error');
  }
}
 
// テストでの使用例
test('重要な機能', async ({ page }) => {
  const logger = new TestLogger('critical-feature');
 
  try {
    logger.info('ページへのナビゲーション開始');
    await page.goto('/critical-path');
    logger.info('ページロード完了');
  } catch (error) {
    logger.error('ナビゲーション失敗', error as Error);
    throw error;
  }
});

// playwright.config.ts の関連部分
export default defineConfig({
  use: {
    // ハードコードせず env から読む
    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3000',
  },
});

# .github/workflows/e2e-tests.yml
- name: Pages preview URL を取得
  id: pages
  run: |
    DEPLOYMENT_URL=$(curl -s \
      -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
      "https://api.cloudflare.com/client/v4/accounts/${{ secrets.CF_ACCOUNT_ID }}/pages/projects/${{ env.PROJECT }}/deployments" \
      | jq -r '.result[0].url')
    echo "url=$DEPLOYMENT_URL" >> $GITHUB_OUTPUT
 
- name: E2Eテスト実行
  env:
    PLAYWRIGHT_BASE_URL: ${{ steps.pages.outputs.url }}
  run: npx playwright test

// tests/global-setup.ts — テストスイート開始前に warm-up リクエストを投げる
import { request } from '@playwright/test';
 
async function globalSetup() {
  const baseURL = process.env.PLAYWRIGHT_BASE_URL!;
  const req = await request.newContext();
 
  // Warm-up: 主要4ページを事前に取得して Workers を温める
  const warmupPaths = ['/', '/articles', '/membership', '/blog'];
  await Promise.all(
    warmupPaths.map(p =>
      req.get(`${baseURL}${p}`, { timeout: 30000 }).catch(() => null)
    )
  );
 
  await req.dispose();
}
 
export default globalSetup;

test.beforeEach(async ({ context }) => {
  // 各テスト開始前に Cookie と Web Storage をクリア
  await context.clearCookies();
  await context.addInitScript(() => {
    window.localStorage.clear();
    window.sessionStorage.clear();
  });
});