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

## はじめに

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

https://qiita.com/Mor1yarty/items/e3aca3f92cc61eee72d1

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

## 本記事で扱う内容

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

## 前提環境

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

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

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

### 生成されたテスト項目例

```markdown
| テスト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を動作させるため、以下の設定を適用しました：

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

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

https://qiita.com/Mor1yarty/items/f3576b7eaac015bb3430

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

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

```javascript
// 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 エビデンス撮影の自動化

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

```javascript
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接続確認

![TX-001_______.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242618/6613f67f-19c0-4aa1-9c02-3478ce3f8ddb.png)


## 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リンクを自動生成：

```markdown
#### SR-001: 有効コード手動入力
- **結果**: ✅ PASS
- **エビデンス**: 
  - 商品コード入力:
    ![商品コード入力](./テスト実行結果/スクリーンショット/SR-001_商品コード入力.png)
  - 商品検索結果:
    ![商品検索結果](./テスト実行結果/スクリーンショット/SR-001_商品検索結果.png)
```
![スクリーンショット 2025-06-19 004733.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242618/58d4bd91-0aa0-4469-bf93-c6f310fe5693.png)

## 6. PlaywrightMCPの活用メリット

### 6.1 実ブラウザでのテスト

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

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

### 6.2 エビデンス自動収集

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

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

### 6.3 再現性の確保

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

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

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

### 7.1 ブラウザ表示の課題

WSL環境でのブラウザ自動化には特有の課題があります。詳細は[こちらの記事](https://qiita.com/Mor1yarty/items/f3576b7eaac015bb3430)で解説していますが、主要なポイントは：

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

### 7.2 採用した設定

```javascript
{
  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に組み込むことで、**継続的テスト**の実現が可能です：

```yaml
- 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でマイクロサービスを構築してみた](https://qiita.com/Mor1yarty/items/e3aca3f92cc61eee72d1)
- [WSL環境でのブラウザ自動化設定](https://qiita.com/Mor1yarty/items/f3576b7eaac015bb3430)
- [Playwright公式ドキュメント](https://playwright.dev/)
- [Claude Code公式ドキュメント](https://docs.anthropic.com/en/docs/claude-code)