はじめに

前回の記事「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が自動生成した報告書には以下が含まれます：

テスト実行概要
- 計画書との対応表
- 実施率・達成率
詳細テスト結果
- 各テストケースの結果
- スクリーンショット付きエビデンス
品質評価
- KPI達成度
- 不具合管理
推奨事項
- 緊急対応項目
- 長期改善計画

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の組み合わせにより、テスト計画から報告書作成までの完全自動化を実現しました。

主な成果

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

技術的ポイント

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

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

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

参考リンク