エンジニアが一度は夢見る自然言語だけでテストをした話

はじめに

ブラウザテストの自動化は、多くの開発者が「やりたいけど、ハードルが高い」と感じる領域です。

本記事では、Claude CodeとChrome DevTools MCPを使って、自然言語の指示だけでブラウザテストを自動化した実践事例をご紹介します。

MCPの実用例を探している開発者の方に、具体的な活用イメージを提供できれば幸いです。まず、MCPを使ったテスト自動化の全体像を理解し、次に実際の成果と従来手法との比較をご覧いただきます。その後、実装のポイントと応用可能性について解説します。

MCPによるブラウザテスト自動化の仕組み

MCP（Model Context Protocol）とは

MCPは、Claude Codeがブラウザやその他のツールと連携するための通信規約です。開発者が自然言語で指示を出すと、MCPサーバーがその指示を解釈してブラウザを操作します。

以下の図は、Claude CodeとMCPサーバーの関係を示しています。


graph TB
    subgraph "開発者"
        A[自然言語で指示]
    end

    subgraph "Claude Code"
        B[指示の解釈]
        C[テスト戦略の立案]
    end

    subgraph "MCP Server"
        D[Chrome DevTools MCP]
    end

    subgraph "実行環境"
        E[Chromeブラウザ]
        F[テスト対象ページ]
    end

    A --> B
    B --> C
    C --> D
    D --> E
    E --> F

開発者は「コンテンツが50パーセント以上表示された状態で2秒経過したときのイベントをテストして」のような自然言語で指示を出します。Claude Codeはその指示を解釈し、テスト戦略を立案します。MCPサーバーはClaude Codeからの指示を受けて、実際のブラウザ操作を実行します。

従来のE2Eテストとの違い

従来のE2EテストフレームワークとMCPを使った自動化では、アプローチが大きく異なります。

以下の表は、両者の比較を示しています。

観点	従来のE2Eフレームワーク	Claude Code + MCP
導入コスト	フレームワークのインストール、設定ファイルの作成が必要	MCPサーバーの追加のみ
テストコード	JavaScriptやTypeScriptでテストコードを記述	自然言語で指示を出すだけ
メンテナンス	セレクタの変更などでテストコードの修正が必要	自然言語で修正指示を出すだけ
学習コスト	フレームワーク固有のAPIを学習	自然言語で指示を出せれば使える

従来のE2Eフレームワークでは、テストコードの記述、セレクタの管理、非同期処理の制御など、技術的なハードルが存在します。一方、MCPを使った自動化では、これらの技術的詳細をClaude Codeが担当するため、開発者は「何をテストしたいか」に集中できます。

Chrome DevTools MCPの役割

Chrome DevTools MCPは、Chromeブラウザを操作するための専用MCPサーバーです。Chrome DevTools Protocol（CDP：Chromeブラウザを外部から制御するためのプロトコル）を通じて、ページ遷移、JavaScript実行、DOM操作などを行います。

以下の図は、Chrome DevTools MCPが提供する主要な機能を示しています。


flowchart TD
    A[Chrome DevTools MCP] --> B[ページ遷移]
    A --> C[JavaScript実行]
    A --> D[DOM操作]
    A --> E[スクリーンショット取得]

    B --> F[テスト対象ページへの移動]
    C --> G[テストロジックの実行]
    D --> H[要素の表示状態確認]
    E --> I[視覚的なエビデンス記録]

GitHub - ChromeDevTools/chrome-devtools-mcp: Chrome DevTools for coding agents GitHub
上記のURLをClaude Codeに渡して使えるようにしてと言えばセットアップ完了です。難しいセットアップはとりあえずはないと考えて良いでしょう。

実際のテスト自動化の成果

テストした機能の概要

今回テストした機能は、コンテンツページにおける閲覧イベントの発火ロジックです。IntersectionObserver（インターセクションオブザーバー：要素の表示状態を監視するブラウザAPI）を使用して、以下の3種類のイベントを実装しました。

1. onContentAppear：コンテンツ上端が画面内に入ったとき

2. onContentScrollEnd：コンテンツ下端が画面内に入ったとき

3. onContentRead：コンテンツがXXパーセント以上表示された状態でX秒経過したとき

これらのイベントは、ユーザーの閲覧行動を詳細に把握するための重要な機能です。しかし、タイミング制御や非同期処理が複雑で、手動テストでは再現性の確保が困難でした。

9つのテストケースの自動化

Claude Codeに自然言語で指示を出すことで、以下の9つのテストケースを自動的に実装・検証しました。
私は実際にテスト指示テーブルをmdファイルで作成してそれをそのままClaude Codeに投げました。

以下の図は、テストケースの全体構成を示しています。


graph TD
    subgraph "既存機能の動作確認"
        T1[上端表示でイベント発火]
        T2[下端表示でイベント発火]
        T3[同一コンテンツでの重複防止]
        T4[複数コンテンツでの個別発火]
    end

    subgraph "新規機能の検証"
        T5[X0%以上表示でX秒後に発火]
        T6[X0%未満では発火しない]
        T7[X秒未満で画面外に出たら発火しない]
        T8[同一コンテンツで再度X秒経過しても発火しない]
    end

    subgraph "プラットフォーム互換性"
        T9[iOS/Android両方で動作する]
    end

以下のような自然言語の指示でClaude Codeは理解してテストを実施してくれます。

「コンテンツをX0パーセント以上表示させて、X秒待機してから、イベントが発火していることを確認してください」

「コンテンツをX0パーセント以上表示させて、X秒後にスクロールアウトさせて、イベントが発火していないことを確認してください」

Claude Codeは、これらの指示を解釈して、適切なブラウザ操作とアサーション（期待値との比較検証）を自動的に実行しました。

テスト結果の定量的評価

9つのテストケースすべてが合格し、機能の正確性を確認できました。

以下の表は、手動テストとMCP自動化の比較を示しています。

指標	手動テスト	MCP自動化	改善率
9ケース実行時間	約45分	約8分	82%削減
再現性	低い（手動操作のばらつき）	高い（完全に同じ操作）	–
エビデンス記録	手動でスクリーンショット	自動でJSON形式で記録	–
テスト追加コスト	高い（手順書更新・実行）	低い（自然言語で指示）	–

特に注目して欲しいのは、テスト追加のコストが劇的に下がったことです。手動テストでは新しいテストケースを追加するたびに手順書を更新し、手動で実行する必要がありました。MCP自動化では、自然言語で新しい指示を出すだけで、すぐにテストを追加できます。

自然言語での指示で気をつけること

指示を出す際のポイント

自然言語で指示を出す際には、以下のポイントを意識すると効果的です。

1. 目的を明確にする

良い例：「コンテンツが50パーセント以上表示された状態で2秒経過したときのイベントをテストしてください」

悪い例：「テストしてください」

2. 期待結果を明示する

良い例：「イベントが発火していることを確認してください」

悪い例：「何か起きるか見てください」

3. 前提条件を説明する

良い例：「モックを設定してから、ページをリロードしてください」

悪い例：「動かしてください」

4. 複雑な指示は段階的に分割する

良い例：「まずモックを設定してください。次にページに移動してください。最後にテストを実行してください」

悪い例：「モックを設定してページに移動してテストを実行してください」

これらのポイントを守ることで、Claude Codeがより正確にテストを実行できます。技術的な詳細（セレクタの書き方、非同期処理の制御など）はClaude Codeが担当するため、開発者は「何をテストしたいか」に集中できます。

終わりに

本記事では、Claude CodeとChrome DevTools MCPを使った、自然言語によるブラウザテスト自動化の実践事例をご紹介しました。自然言語で指示を出すだけで、複雑なブラウザテストを自動化でき、手動テストに比べて実行時間を80パーセント以上削減できました。

MCPの実用例として、以下の価値を実証できました。

1. 導入のハードルが低く、数分で最初のテストを実行できる

2. 自然言語で指示を出すだけで、技術的詳細をClaude Codeが担当

3. メンテナンスコストが低く、ページ変更にも柔軟に対応できる

4. チーム全体でテストを共有しやすく、非エンジニアでも参加できる

この手法は、E2Eテストフレームワークを導入するほどではないが手動テストでは不十分という、中規模のテスト自動化ニーズに特に有効です。MCPの活用により、テストケースの追加や変更も柔軟に対応できます。ぜひ実際のプロジェクトで、この手法を試してみてください。

参考リンク
Claude Codeについてさらに詳しく知りたい方は、以下のリソースをご参照ください。
- Claude Code公式ドキュメント

Not Found - Claude Docs docs.anthropic.com

- Claude Code GitHub リポジトリ

GitHub - anthropics/claude-code: Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands. GitHub

- Claude Code MCP統合

Connect Claude Code to tools via MCP - Claude Code Docs docs.anthropic.com