Claude Codeで実現するテスト計画から報告書まで完全自動化 - PlaywrightMCPによるE2Eテスト実践編

はじめに

前回の記事「Claude Codeでマイクロサービスを構築してみた」では、POSアプリケーションの開発をClaude Codeで実施しました。今回は、その続編としてテスト計画書の作成からE2Eテスト実行、報告書生成までを完全自動化した実践例をご紹介します。

特に注目すべきは、PlaywrightMCPを活用することで、実際のブラウザUIを操作するE2Eテストと、スクリーンショット付きの詳細報告書を自動生成できた点です。

本記事で扱う内容

• テスト計画書の自動作成
• PlaywrightMCPによるE2Eテスト自動実行
• WSL環境でのブラウザ自動化設定
• スクリーンショット付きテスト報告書の自動生成
• テスト結果の可視化と分析

前提環境

• Windows 11 + WSL2
• POSアプリケーション（Next.js + FastAPI + MySQL）
• Claude Code
• PlaywrightMCP

1. テスト計画書の自動作成

まず、Claude Codeに既存のテスト計画書をベースとして、Level2機能（JANスキャン・税計算）追加に対応したテスト計画書の作成を依頼しました。

生成されたテスト項目例

| テストID | 分類 | テスト項目 | 優先度 |
|----------|------|------------|--------|
| JS-001 | 正常系 | 有効バーコードスキャン | High |
| JS-002 | 異常系 | 未登録バーコードスキャン | High |
| TX-001 | 正常系 | 複数商品税込計算 | High |
| SR-001 | 正常系 | 有効コード手動入力 | High |
| PC-001 | 正常系 | 購入処理・DB保存 | High |

12のテストケースが体系的に整理され、優先度付けも自動で行われました。

2. PlaywrightMCPによるE2Eテスト自動化

2.1 WSL環境でのブラウザ自動化設定

WSL環境でPlaywrightを動作させるため、以下の設定を適用しました：

const PLAYWRIGHT_CONFIG = {
  headless: false,
  args: [
    '--disable-dev-shm-usage',
    '--disable-gpu',
    '--remote-debugging-port=9222'
  ],
  ignoreHTTPSErrors: true
};

この設定により、WSLgでブラウザGUIが正常に表示され、テスト実行中の様子を視覚的に確認できます。詳細については、以下の記事をご参照ください。

2.2 自動生成されたテストスクリプト

Claude Codeが生成したPlaywrightテストスクリプトの一例：

// SR-001: 有効コード手動入力
async function testSR001(page) {
  const testId = 'SR-001';
  
  // 商品コード入力
  const codeInput = page.locator('input[placeholder="② コード表示エリア"]');
  await codeInput.fill('4901681143115');
  
  // スクリーンショット撮影
  await takeScreenshot(page, testId, '商品コード入力');
  
  // 検索実行
  const searchButton = page.locator('button:has-text("手動検索")');
  await searchButton.click();
  
  // 結果確認
  await page.waitForSelector('.info-value', { timeout: 10000 });
  await takeScreenshot(page, testId, '商品検索結果');
  
  // 結果検証
  const productName = await page.locator('.info-value').first().textContent();
  if (productName && productName.includes('サラサクリップ')) {
    await addTestResult(testId, '商品検索機能', 'PASS', 
      `商品名「${productName}」が正常に表示された`);
  }
}

3. スクリーンショット付きエビデンス自動収集

3.1 エビデンス撮影の自動化

各テストケースで自動的にスクリーンショットを撮影し、ファイル名を体系的に管理：

async function takeScreenshot(page, testId, description) {
  const filename = `${testId}_${description.replace(/[^a-zA-Z0-9]/g, '_')}.png`;
  const filepath = path.join(SCREENSHOTS_DIR, filename);
  
  await page.screenshot({
    path: filepath,
    fullPage: true
  });
  
  return filename;
}

3.2 収集されたエビデンス

今回のテスト実行で15枚のスクリーンショットが自動収集されました：

• 初期画面表示
• 商品検索結果
• 購入処理画面
• 税計算モーダル
• レスポンシブデザイン（デスクトップ・タブレット・モバイル）
• エラーメッセージ表示
• HTTPS接続確認

4. テスト実行結果

4.1 実行結果サマリー

📊 テスト実行結果
- 計画テストケース総数: 12件
- 実行テストケース数: 9件
- 成功: 7件 (77.8%)
- 失敗: 2件 (22.2%)
- 未実施: 3件（環境制約による）

4.2 主要な成功事例

✅ 正常動作確認済み機能:

• 商品検索機能（手動入力）
• 購入処理・DB保存機能
• 購入後画面初期化
• レスポンシブデザイン
• HTTPS通信
• API連携

4.3 検出された課題

❌ 課題がある機能:

• JANバーコードスキャン機能（カメラ制約）
• 税表示モーダル（フロントエンド表示ロジック）

5. 自動生成されたテスト報告書

5.1 報告書の構成

Claude Codeが自動生成した報告書には以下が含まれます：

1. テスト実行概要

   • 計画書との対応表
   • 実施率・達成率

2. 詳細テスト結果

   • 各テストケースの結果
   • スクリーンショット付きエビデンス

3. 品質評価

   • KPI達成度
   • 不具合管理

4. 推奨事項

   • 緊急対応項目
   • 長期改善計画

5.2 インライン画像表示

報告書内でスクリーンショットがインライン表示されるよう、Markdownリンクを自動生成：

#### SR-001: 有効コード手動入力
- **結果**: ✅ PASS
- **エビデンス**: 
  - 商品コード入力:
    ![商品コード入力](./テスト実行結果/スクリーンショット/SR-001_商品コード入力.png)
  - 商品検索結果:
    ![商品検索結果](./テスト実行結果/スクリーンショット/SR-001_商品検索結果.png)

6. PlaywrightMCPの活用メリット

6.1 実ブラウザでのテスト

PlaywrightMCPにより、実際のブラウザでユーザー操作を再現：

• マルチデバイス対応: デスクトップ・タブレット・モバイル
• 実環境での動作確認: HTTPS通信、レスポンシブデザイン
• 視覚的な検証: UIの表示確認、エラーメッセージ表示

6.2 エビデンス自動収集

従来の手動テストでは困難だった、すべてのテストケースでの一貫したエビデンス収集が実現：

• テスト実行と同時にスクリーンショット撮影
• ファイル名の体系的管理
• 報告書への自動挿入

6.3 再現性の確保

同じテストスクリプトで何度でも同じ条件でのテストが可能：

• 人的ミスの排除
• テスト漏れの防止
• 継続的インテグレーション対応

7. WSL環境での注意点と対策

7.1 ブラウザ表示の課題

WSL環境でのブラウザ自動化には特有の課題があります。詳細はこちらの記事で解説していますが、主要なポイントは：

• WSLg環境でのヘッドレスモード設定
• GPU無効化による安定性向上
• デバッグポートの適切な設定

7.2 採用した設定

{
  headless: false,
  args: [
    '--disable-dev-shm-usage',
    '--disable-gpu', 
    '--remote-debugging-port=9222'
  ],
  ignoreHTTPSErrors: true
}

8. 今回の成果と効果

8.1 工数削減効果

従来の手動テスト（推定）:

• テスト計画書作成: 4時間
• テスト実行: 3時間
• エビデンス収集・整理: 2時間
• 報告書作成: 3時間
• 合計: 12時間

Claude Code + PlaywrightMCP:

• 初期設定: 1時間
• テスト実行: 5分
• 報告書生成: 自動
• 合計: 約1時間

約91%の工数削減を達成しました。

8.2 品質向上効果

• 一貫性: 毎回同じ条件でのテスト実行
• 網羅性: 計画された全テストケースの確実な実施
• 可視性: スクリーンショット付きエビデンス
• 再現性: 問題発生時の詳細な状況把握

9. 今後の展開

9.1 CI/CDパイプライン組み込み

今回作成したテストスクリプトをGitHub Actionsに組み込むことで、継続的テストの実現が可能です：

- name: E2E Tests with Playwright
  run: |
    npm run test:e2e
    
- name: Upload Test Results
  uses: actions/upload-artifact@v3
  with:
    name: test-results
    path: テスト成果物/

9.2 テストケースの拡充

カメラ機能テストなど、今回制約で実施できなかったテストケースの追加実装を検討中です。

9.3 AIテスト生成の進化

Claude Codeの進歩により、より複雑なテストシナリオの自動生成や、テスト結果からの自動改善提案なども期待できます。

まとめ

Claude Code + PlaywrightMCPの組み合わせにより、テスト計画から報告書作成までの完全自動化を実現しました。

主な成果

1. 12テストケースの体系的計画書自動生成
2. 9テストケースのE2Eテスト自動実行
3. 15枚のスクリーンショット付きエビデンス収集
4. 詳細なテスト報告書自動生成
5. 約91%の工数削減達成

技術的ポイント

• WSL環境でのPlaywright設定最適化
• スクリーンショット付きエビデンス自動収集
• テスト結果のJSON管理と報告書への自動反映
• 計画書との対応表による進捗可視化

この手法は、POSアプリケーション以外のWebアプリケーションにも応用可能です。特に、定期的なリグレッションテストが必要なシステムや、複数環境でのテストが必要なシステムにおいて、大幅な効率化が期待できます。

皆さんもぜひ、Claude Code + PlaywrightMCPを活用したテスト自動化にチャレンジしてみてください！

参考リンク

• 前回記事: Claude Codeでマイクロサービスを構築してみた
• WSL環境でのブラウザ自動化設定
• Playwright公式ドキュメント
• Claude Code公式ドキュメント