🧩

動作確認は面倒なので Claude CodeとChrome DevTools MCPにやってもらいましょう

に公開
Model Context Protocol
Gherkin
Claude Code
MCP サーバー
zennfes2025ai
tech

💡 はじめに

E2E テストは、アプリ状態の再現が面倒になりがちです。
本稿では Claude Code と Chrome DevTools MCP を組み合わせ、
AI がブラウザを自律的に操作して動作確認を進める設計を紹介します。

🎯 目的

「E2Eテストは、AIに“頼む”だけにする。」

Claude Codeを通じて自然言語で操作を指示し、
Chrome DevTools MCP経由でAIがブラウザを直接操作します

⚙️ 前提と準備

🧩 サンプルリポジトリ

この記事の構成は以下のサンプルリポジトリをもとにしています。
👉 emrum01/chrome-devtools-e2e-sample

Claude Code と Chrome DevTools MCP を組み合わせたAI駆動E2Eテストの最小構成を再現したものです。
ただし、このサンプルは本業の実装を参考に構造のみ再現しており、
実際の業務シナリオや全挙動を保証するものではありません。

🧠 Chrome DevTools MCPとは

Chrome DevTools MCP（Model Context Protocol） は、
AIエージェントが DevTools 経由で Chrome ブラウザを直接制御できる仕組みです。
クリック・入力・スクロール・スクリーンショットなどの操作を AI が実行でき、
ブラウザの状態を観測しながら操作を進めることが可能になります。
👉 公式リポジトリ

実際これだけで勝手に類推して諸々進めてくれたりするんですが、実際のアプリ開発では、環境の選択などの複雑な条件が加わるためアプリの画面だけではなく、操作の手順や条件分岐をあらかじめ保存しておきたい場合があると思います。

後述のGherkinを使ってその辺りを定義していきます。

🧾 Gherkinとは

Gherkin は、テスト仕様を自然言語で記述できる構文です。
「前提」「もし」「ならば」といった文で操作手順や期待結果を表現し、
非エンジニアでも意図を理解しやすい形式で自動テストを記述できます。
本記事ではこれを日本語で書き、AIが内容を手順として実行します。
👉 Cucumber公式ドキュメント

🛠️ 実行準備

Claude Codeで dangerously skip permissions を利用できるようにしておく必要があります。

安全な実行管理には以下の記事が参考になります：

📰 wasabeefさん: Claude CodeでセキュアにBashを使う方法

また、DevTools MCP のセットアップは公式リポジトリを参照してください。
👉 https://github.com/ChromeDevTools/chrome-devtools-mcp

特徴

  • Claude Codeを実行環境に使用
  • Chrome DevTools MCPで実ブラウザ制御
  • featureファイルは日本語Gherkin
  • /e2e-chrome-devtools-mcp コマンド1行で実行
  • 入力 → 状態確認 → 再入力 のループで安定化

🧭 実行の流れ（5ステップ）

💬 featureファイル例

Feature: 購入（支払い方法の切り替え）

  Background:
    前提 ステージング環境を開いている
    かつ テストユーザーでログインしている
    かつ カートに商品が1点以上入っている

  Scenario: ペイパルで購入を完了する
    もし 支払い方法 "paypal" を選択する
    かつ "注文を確定する" をクリックする
    ならば "注文が完了しました" が表示されていること

🧩 コマンド設定

.claude/commands/e2e-chrome-devtools-mcp.md の中身は次の1行だけです。

docs/e2e-testing/RUNBOOK.md を読み込んでその中身を実行する

🚀 実行例

Claude Code のチャットで次のように入力します。

/e2e-chrome-devtools-mcp "ペイパルで購入して"

AI は次の順で進行します：

  1. RUNBOOKを読み込み、環境と目的を設定
  2. ai-rules.mdから対象feature@tagを特定
  3. 通常操作でクリック・入力を実行
  4. 入力 → スナップショット確認 → 再入力のループで安定化
  5. 失敗時は snippets または evaluate_script でリカバリ

🧠 なぜうまく動くのか

Chrome DevTools MCPにより、AIはブラウザと直接通信して操作と検証を同時に行えます。

  • 観測: DOM構造や要素状態をリアルタイム取得
  • 操作: クリック・入力・スクロールなどを実行
  • 確認: スナップショットや属性を比較して結果を判断

これにより、AIは「入力結果を自分で見て再判断する」テストを実現します。
非同期UIにも強く、自律的にリトライや補正操作を行えるのが特徴です。

✅ できるようになること

  • Gherkinをガイドラインとして実ブラウザ操作
    • featureファイルがそのままAIの指示書として動作
  • 環境切替を自然言語で
    • 例：「ステージングで実行して」で環境を自動変更
  • 詰まりにくい動作
    • evaluate_script + snippets によるフォールバック制御

🧭 使ってみた所感

実際に使ってみると、UI操作はゆっくりだが確実です。
「すぐ確認したい」ケースでは手動の方が早いものの、
クリック順や画面遷移をミスなく踏んでくれる安心感があります。

特に便利なのは、動作確認を並行して進められる点。
自然言語で「ステージングで」「今度はPayPalで」と切り替えるだけで、
AIが環境と手順を再解釈して再実行してくれます。

スクリプトを書くよりも、対話でテストを操る感覚に近く、
ブラウザを実際に“動かすAI”という印象です。

動かした後にplaywrightに起こせたらいいんだろうなー

📘 まとめ

この設計は、サンプル構成
👉 emrum01/chrome-devtools-e2e-sample
をもとに構築された Claude Code × Chrome DevTools MCP 連携E2Eテスト の最小構成です。

AIが実ブラウザを操作し、入力 → 確認 → 再入力 を繰り返すことで、
人間のように画面を見て判断するテストを実現します。

E2Eテストは“書く”ものではなく、“頼む”もの。
Claude CodeとDevTools MCPが、その新しい開発体験を可能にします。

GitHubで編集を提案

Discussion