AI駆動開発における結合試験の自動化 — Playwright MCPの活用
Mark451項目272期待結果を全自動で — ブラウザ操作もAIに任せた結合試験の実際
「テストもAIに任せる」という選択
前回の記事で、Claude Codeにプログラム設計書140件を自動生成させた話をお伝えしました。設計書ができた。実装も進んだ。次に立ちはだかったのが、結合試験です。
wagahiアプリのバックエンド結合試験は全51項目、期待結果272件。フロントエンド結合試験は34項目、331期待結果。これを人手で一つずつ実行し、スクリーンショットを撮り、結果を記録していたら、いったいどれだけの時間がかかるのか。
当社の答えは明快でした。テストもAIに自動実行させる。使ったのは、Playwright MCPとChrome DevTools MCPという2つのツールです。
Playwright MCP — ブラウザ操作の自動化
Playwright MCPは、Claude Codeのセッション内でブラウザを自動操作できるツールです。ページ遷移、ボタンクリック、フォーム入力、スクリーンショット取得まで、すべてをプログラム的に実行できます。
導入は簡単でした。npmパッケージをインストールし、Claude Codeの設定ファイルに登録するだけ。Chromiumブラウザが自動的にダウンロードされ、ヘッドレスモードで動作します。
重要なのは、Playwright MCPがClaude Codeの会話の中で直接使える点です。試験手順書を読み込ませ、「この手順に従って試験を実行して」と指示するだけで、AIがブラウザを操作し、各ステップのスクリーンショットを自動取得します。
Chrome DevTools MCP — 内部状態の可視化
ブラウザの画面操作だけでは、結合試験として不十分です。画面の裏側で何が起きているか——Redux Storeの状態変化、Consoleのエラー出力、Networkリクエストの成否——を確認する必要があります。
そこで導入したのがChrome DevTools MCPです。これにより、Claude CodeからChrome開発者ツールの機能にアクセスできます。
- Redux DevTools: アプリケーションの状態管理を確認。ログイン後のユーザー情報、キャラクターデータ、会話履歴がStoreに正しく格納されているかを検証
- Console: JavaScriptエラーや警告の有無を確認。予期しないエラーが発生していないかを監視
- Network: APIリクエストの送受信を確認。リクエストヘッダー、レスポンスステータス、ペイロードの正確性を検証
Playwright MCPとChrome DevTools MCPの組み合わせにより、「画面操作」と「内部状態確認」の両面から試験を自動化できました。
試験手順書 → 自動実行 → エビデンス生成
結合試験の自動化フローは以下の通りです。
- 試験手順書の読み込み: 各試験項目のMarkdownファイルをClaude Codeに読ませる
- Playwright MCPでブラウザ操作: 手順書に記載されたステップを順次実行
- Chrome DevTools MCPで状態確認: Redux State、Console、Networkを確認
- スクリーンショット自動取得: 各期待結果に対応するエビデンスを自動保存
- 試験成績書の自動生成: 期待結果と実際の結果を照合し、合否を判定
このフローの優れた点は、試験手順書さえあれば、あとはAIが全自動で実行することです。人間が行うのは、試験手順書の作成と、最終的な結果の承認だけ。
バックエンド結合試験 — 51項目100%合格
バックエンド結合試験は、Spring Boot 3.5.0 + PostgreSQL 17.7 + MockMvcの環境で実施しました。試験カテゴリと結果は以下の通りです。
- IT-API-AUTH（認証API）: 4項目、20期待結果 → 100%合格
- IT-API-CHAR（キャラクターAPI）: 7項目、35期待結果 → 100%合格
- IT-API-CONV（会話API）: 5項目、31期待結果 → 100%合格
- IT-API-INIT（システム初期化）: 3項目、15期待結果 → 100%合格
- IT-API-USER（ユーザーAPI）: 3項目、15期待結果 → 100%合格
- IT-INF（インフラ連携）: 7項目、35期待結果 → 100%合格
- IT-EXT（外部連携）: 6項目、30期待結果 → 100%合格
- IT-CROSS（横断的連携）: 10項目、50期待結果 → 100%合格
- IT-E2E（エンドツーエンド）: 3項目、15期待結果 → 100%合格
合計: 51項目、272期待結果、100%合格。
ただし、最初から全合格だったわけではありません。会話API（IT-API-CONV）の試験では、冪等性保証の問題（不明事象-059）やGemini APIのレスポンス形式の差異など、実際に動かして初めて判明する問題が次々と見つかりました。これらの「不明事象」については次回の記事で詳しくお伝えします。
フロントエンド結合試験 — MSWとPlaywrightの連携
フロントエンド結合試験では、MSW（Mock Service Worker）を使ってバックエンドAPIをモック化しました。これにより、バックエンドの実装状況に依存せず、フロントエンド単体での結合試験が可能になります。
IT-NAV-001（アプリ起動からホーム画面への正常遷移）を皮切りに、画面遷移、Redux状態管理、API連携、コンポーネント、カスタムフック、ライフサイクルの6カテゴリ34項目を計画しました。
Playwright MCPによる自動実行では、スプラッシュ画面のアニメーション完了待機、ローディング表示の確認、遷移後のURL検証まで、手順書通りの操作が正確に再現されました。
Spring Boot 3.5.0アップグレード — 887テスト全合格
結合試験と並行して、Spring Boot 3.3.4から3.5.0へのメジャーアップグレードを実施しました。
アップグレードの影響範囲は広く、Entity、Repository、Service、インフラ層すべての互換性確認が必要でした。結果は887テスト全合格、失敗0、エラー0。ビルド時間は3分14秒。
このアップグレードが比較的スムーズに完了した理由は、結合試験基盤が整っていたからです。アップグレード後にすべてのテストを実行し、問題がないことを即座に確認できました。テスト基盤への投資は、将来の変更コストを劇的に下げる。これは改めて実感した教訓です。
自動化がもたらした副産物
結合試験の自動化で得られた最大の恩恵は、テスト実行時間の短縮だけではありません。
再現性の確保が最も大きな価値でした。手動テストでは、実行者によって操作のタイミングや確認の精度にばらつきが出ます。自動化されたテストは、毎回まったく同じ条件で実行されます。
また、エビデンスの標準化も重要です。スクリーンショットのファイル名規則（EVI_試験ID_連番.png）、試験成績書のフォーマット、期待結果と実際の結果の対照表。これらがすべて統一された形式で自動生成されるため、後からの確認や監査対応が容易になります。
次回予告
次回は、「不明事象」との戦いについてお伝えします。結合試験を進める中で発見された74件の不明事象。設計書には書かれていない現実の問題に、AIとどう立ち向かったのか。設計と実装のフィードバックループが生み出す品質向上のサイクルについてお話しします。
本記事は2025年11月時点の情報に基づいています。
著者: 株式会社シーテン — インフラ系から宇宙関連システムまで20年以上の開発経験を持つ技術者集団。2025年より生成AI・AIエージェントを活用したAI駆動開発に本格参入し、自社プロダクト「wagahi」の開発を通じて実践知見を蓄積中。
関連記事:
投稿者プロフィール
