Gemini CLI、BrowserMCP、Playwright を使用して UI テストを自動化する

1. はじめに

ウェブアプリケーションのテストは面倒な作業になることがあります。従来の UI テストは、脆弱性との戦いのように感じられることがよくあります。複雑なスクリプトの作成、脆弱な CSS セレクタや XPath セレクタの管理、シンプルなユーザーフローの検証のために多くの手順を踏む必要が生じます。

しかし、エージェントにテストする内容を自然言語で伝えるだけで、エージェントがそれを実行してくれたらどうでしょうか？

この Codelab では、Gemini CLI と BrowserMCP などのマルチモーダルツールを使用する方法について説明します。自然言語を使用して自動 UI テストを作成して実行する方法について説明します。この Codelab では、UI テストのフレームワークとツールに関する予備知識は必要ありません。

ラボの内容

Model Context Protocol（MCP）の概要とその重要性。
BrowserMCP を使用して AI エージェントがウェブブラウザを制御する方法。
Gemini CLI から自動 UI テストを実行する方法。
エージェントのスキルとそのメリットを理解する。
スキルを使用して Playwright を使用するようにエージェントをトレーニングする。
Antigravity Browser Subagent の概要。
ブラウザ制御のその他のユースケース。

演習内容

開発環境をセットアップします。
テストが必要なデモアプリケーションを確認します。
Gemini CLI を使用して、BrowserMCP 経由でアプリケーションを操作します。
エージェントスキルを使用して Playwright を使用する方法をエージェントに教えます。

2. 前提条件

楽しい内容に入る前に、必要なものがすべて揃っていることを確認しましょう。

この Codelab では、Gemini CLI、MCP ツール、エージェントスキル、React デモアプリケーションを使用します。

ツール

このラボは、次のものが揃っていることを前提としています。

Chrome ブラウザ
Gemini CLI（nodejs に依存）
Git

この手順は、Linux（または WSL）または macOS 環境で作業していることを前提としています。Windows を使用している場合は、WSL を使用して手順に沿って操作できます。

（次のことに注意してください。

BrowserMCP は Google Cloud Shell から動作しません

。同じマシンで実行されているローカルブラウザにのみ接続するためです。）

Google Cloud プロジェクトを作成する

Gemini API キーがすでにある場合は、そのキーを使用してこの手順をスキップできます。

それ以外の場合は、このチュートリアルを進めるために Google Cloud プロジェクトが必要です。Google Cloud サービスはデプロイしませんが、Gemini API キーを関連付けるにはプロジェクトが必要です。（Gemini を使用するには、このキーが必要です）。

Google Cloud に慣れている場合は、こちらで新しいプロジェクトを作成できます。また、Google AI Studio 内から Google Cloud プロジェクトを作成することもできます。

Gemini API キーを無料で作成する

次に、Google AI Studio で Gemini API キーを作成します。[Get API Key] をクリックします。

次のような出力が表示されます。

既存の鍵がある場合は、ここに表示されます。新しいキーを作成するには、[Create API Key] をクリックします。

ここでは、既存の Google Cloud プロジェクトを選択するか、新しいプロジェクトを作成します。ここでは、agentic-ui-demo という新しいプロジェクトを作成しました。

これで、プロジェクトと関連する Gemini API キーが用意できました。課金が有効になっていないため、無料割り当ての上限が緩和されていません。割り当てを増やす場合は、[課金を設定] をクリックして課金を有効にしてください。

開発環境をセットアップする

GitHub にデモリポジトリを作成しました。これには、UI テストに使用できるサンプルアプリケーションが含まれています。ローカルターミナルから次のコマンドを実行して、クローンを作成します。

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

次に、.env という名前のサンプル .env.template ファイルのコピーを作成します。これはエディタで行うことも、次のコマンドを実行するだけでも構いません。

cp .env.template .env

この .env ファイルを独自の API キーで更新します。（API キーなどの情報を含む .env ファイルをチェックインしないでください）。最も簡単な方法は、エディタで開くことです。

環境変数を読み込みます。

source .env

デモアプリを起動するための環境を簡単に設定できるように、Makefile を作成しました。これを実行して環境を初期化しましょう。

make install

3. デモアプリケーション

本日テストするアプリは、セキュリティテレメトリーを管理するための未来的なダークテーマのダッシュボードである The Dazbo Omni-Dash です。（はい、バイブコーディングされています）

このアプリが推奨される理由

これは、次のような現実的なテストサーフェスを提供するために構築されています。

モック認証: 特定の認証情報を必要とするログインフロー。
動的コンテンツ: リアルタイムデータをシミュレートするテレメトリーカードとセキュリティログ。
インタラクティブな状態: ユーザーの操作に応じて変化するナビゲーションメニューとフォーム入力。
最新のテクノロジー: React と Vite で構築され、高速でレスポンシブなエクスペリエンスを実現します。

アプリを起動する

アプリケーションを開始するには、次のコマンドを実行します。

make dev

開発用サーバーはすぐに起動し、アプリは http://localhost:5173 で利用できるようになります。

リンクをクリックするだけで、ブラウザでアプリケーションを開くことができます。このプロセスはターミナルで実行したままにしておきます。以降のターミナルコマンドは、別のターミナルセッションで実行します。

4. UI テストの課題

従来の UI テストは、正しく行うのが非常に難しく、保守もさらに困難です。一般的な課題は次のとおりです。

テストの「不安定さ」: タイミングの問題、競合状態、アセットの読み込みの遅延が原因で、1 分後に合格したテストが次の 1 分後に不合格になる。
脆弱なセレクタ: 特定の DOM 構造（div > div > button など）に依存しているため、UI のわずかな変更で壊れてしまい、スクリプトのメンテナンスが頻繁に必要になる。
学習の難しさ: 基本的なクリックを自動化するためだけに、複雑なドメイン固有の言語やフレームワーク固有の癖（Cypress、Selenium、Playwright）を習得する必要がある。
環境のパリティ: 再現が難しいアプリケーションの状態と、テストデータのクリーンアップのオーバーヘッドに苦労しています。

実装ではなく意図に焦点を当てたテスト方法が必要です。

5. MCP の活用

Model Context Protocol（MCP）は、AI モデルとエージェントが外部のツール、API、データとやり取りできるようにするオープンスタンダードです。これは、モデルとエージェントがアクセスできるツールを見つけて実行できるようにするユニバーサルアダプターのようなものです。

従来、大規模言語モデル（LLM）を外部データやツールと統合するには、デベロッパーが新しいデータソースごとにカスタムのハードコードされた API 接続を作成する必要がありました。これにより、新しいモデルやツールが追加されるたびにメンテナンスの負担が増大する「M x N」統合問題が発生していました。Model Context Protocol（MCP）は、これらの機能をオーケストレートするための特定のコードを記述する必要をなくすことで、この問題を解決します。複雑な実行ワークフローを明示的にコーディングする代わりに、LLM を使用してユーザーの自然言語リクエストを解釈し、どのツールをその場で動的に使用するかを推論できます。

ユーザーが自然言語コマンド（「localhost:5173 に移動し、admin としてログインして、送信ボタンをクリックして」など）を発行すると、LLM は利用可能な機能を見つけ、特定のツールを呼び出すための構造化されたリクエストを生成します。MCP クライアントはトランスレータとして機能し、このリクエストを指定された MCP サーバーに転送します。MCP サーバーはアクションを実行するか、データを取得してコンテキストをモデルに返します。これにより、デベロッパーが特定の実行パスをハードコードしなくても、AI が自律的に動作できるようになります。

MCP は、AI アプリケーションの「USB-C」とよく言われるユニバーサルスタンダードを作成するため、大規模な既製の再利用性を実現します。デベロッパーは MCP サーバーを一度構築するだけで、MCP 対応の AI ホストはすぐに接続できるため、M x N 統合の問題が解消されます。プラットフォームごとにカスタム API ブリッジを構築する必要がなくなり、GitHub、Slack、データベースなどの一般的なサービス向けに構築済みのオープンソース MCP サーバーのエコシステムを活用して、エージェントワークフローに直接接続できるようになりました。このモジュール式のプラグアンドプレイアーキテクチャにより、後で LLM プロバイダを切り替えたり、ツールをアップグレードしたりしても、コア統合インフラストラクチャは完全に変更されません。

6. BrowserMCP による自動化

BrowserMCP とは

これが本日使用する最初のツールです。BrowserMCP は、ウェブブラウザを操作するために必要な「目」と「手」を AI エージェントに提供する MCP サーバーです。簡単に言うと、ブラウザに対する人間の操作を模倣します。オープンソースであり、GitHub リポジトリはこちらで確認できます。BrowserMCP のメインドキュメントはこちらをご覧ください。

主な機能は次のとおりです。

URL に移動できます。
DOM を検査できます。
ボタンをクリックしたり、フォームにテキストを入力したりできます。
ドラッグ＆ドロップできます。
ブラウザコンソールログを読み取ることができます。
高速: 自動化はローカルマシンで行われます。

ブラウザ MCP のインストール

BrowserMCP を使用するには、次の 2 つの操作を行う必要があります。

BrowserMCP 拡張機能を Chrome（または Chromium ベースのブラウザ）にインストールします。
エージェントの MCP サーバーを構成します。

拡張機能をインストールするには、こちらの手順に沿って操作してください。この処理には数秒かかります。インストールが完了したら、拡張機能の [接続] をクリックして、現在のタブをエージェントが操作できるようにします。（現在のタブは、デモアプリケーションが実行されているタブにしてください）。

次に、MCP 構成をクライアントに追加する必要があります。

 "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": ["@browsermcp/mcp@latest"]
    }
  }

この設定はどこで行いますか？エージェントによって異なります。たとえば、Gemini CLI では ~/.gemini/settings.json です。内容は次のようになります。

BrowserMCP を使用したテスト

ここからが魔法です。まず、新しいターミナルセッションで Gemini CLI を起動します（gemini を実行します）。（デモアプリケーションは最初のターミナルセッションで実行されていることを思い出してください）。Gemini CLI 内で /mcp を実行して、正しくインストールされていることを確認します。次のようなツールのリストが表示されます。

デモアプリをまだ起動していない場合は、ここで起動します。

make dev

Chrome ブラウザでアプリを開き、そのタブで BrowserMCP 拡張機能を接続する必要があります。run コマンドのリンクをクリックします。次に、BrowserMCP 拡張機能のアイコンをクリックし、[Connect] をクリックします。

これで、Gemini CLI を使用してテストを実行できます。次のプロンプトをコピーして Gemini CLI に貼り付けます。

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

Gemini CLI は、まずデモアプリケーションが指定されたポートで実行されていることを確認します。次に、ツールが実行する予定のアクションを確認するよう求めるメッセージが表示されます。

このセッションで Gemini CLI がすべての BrowserMCP ツールを実行できるようにします。ブラウザに戻ると、自動化されたやり取りが行われていることがわかります。

上記のプロンプトに関する注意点は次のとおりです。

まず、アプリケーションがすでにログインしている場合は、エージェントにログアウトを指示します。「Exit Gateway」などの特定のテキストをクリックするようエージェントに指示する必要はありません。クリックする場所を判断するのに十分なスマートさがあります。
ログインしてメインページをレンダリングした後、エージェントはテレメトリー情報をキャプチャします。この場合も、特定タイルの検索や特定単語の一致をエージェントに指示する必要はありません。そのため、このページに表示される情報を後で拡張または変更しても、このプロンプトは引き続き機能し、出力は引き続きマークダウンテーブルにキャプチャされます。

便利ですよね。

BrowserMCP の作業はこれで完了です。ブラウザで Disconnect をクリックします。

7. スキルと Playwright を使用した自動化

BrowserMCP の制限事項

BrowserMCP は優れていますが、いくつかの制限があります。次に例を示します。

BrowserMCP 拡張機能が接続された既存のブラウザセッションが必要です。（新しいセッションは生成されません）。
Chromium 以外のブラウザはサポートされていません。
MCP サーバーが実行されているのと同じマシンで、別のブラウザプロセスを実行する必要があります。
ローカルファイルシステムを操作することはできません。たとえば、スクリーンショットの証拠となるローカルファイルを作成したり、ダウンロード可能な PDF などのウェブアプリケーションからファイルをダウンロードして保存したりすることはできません。
非決定的です。ユーザーが指示したアクションを実行しようとしますが、予期しないポップアップなどのローカル状態によってインタラクションが中断される可能性があります。
「ヘッドレス」オペレーションはサポートされていません。つまり、実際のブラウザウィンドウなしで CI/CD パイプラインで実行することはできません。

Playwright

Playwright は、より洗練されたツールです。これは、確立されたオープンソースのブラウザ自動化およびテストフレームワークです。BrowserMCP ではできない多くの操作を行うことができます。たとえば、上記のすべての操作を行うことができます。

複雑で信頼性が高く、再現可能なテストシナリオの実行に適しています。長時間実行されるセッションの処理や、複数の独立したセッションの並行実行に特に適しています。

ただし、このような追加機能には、学習曲線が急になるというデメリットがあります。

スキル

幸いなことに、Playwright の使い方を直接学ぶ必要はありません。代わりに、エージェントスキルを使用できます。

では、エージェントスキルとは具体的にどのようなものなのでしょうか。これは、AI エージェントが特定の処理を行う必要があるときに渡すことができる、ドメインの専門知識を厳密にパッケージ化したバンドルと考えてください。特定のタスクに合わせて調整された手順、ベストプラクティス、場合によってはヘルパースクリプトが含まれています。

ここで、プログレッシブディスクロージャーという非常に巧妙な手法が登場します。考えられるすべての API ドキュメントとテストフレームワークのルールを LLM の初期システムプロンプトに詰め込むと、コンテキストウィンドウが消費され、トークンが大量に消費されます。エージェントは、実際にスキルが必要になったときにのみスキルを読み取ります。ベースラインのコンテキストを簡潔に保ち、詳細な「方法」をジャストインタイムで取得します。はい。スキルには、特定の MCP サーバーを活用してタスクを完了する方法に関する手順を組み込むことができます。

映画「マトリックス」のシーンを思い出してください。エージェントが問題を見て、Playwright を知る必要があることに気づき、スキルをダウンロードすると、突然「カンフーを知っている」と言います。Boom. 即座に専門家。

スキルについて詳しくは、以下をご覧ください。

スキルが Playwright に最適な理由

ここではスキルを使用することをおすすめします。Playwright は非常に強力ですが、構文が難しい場合があります。エージェントに Playwright スキルを付与することで、LLM が古い構文を幻覚したり、脆弱なセレクタを記述したりする心配がなくなります。Playwright を正しく使用する方法について、厳選された信頼できるハンドブックを提供します。

Playwright CLI とその関連スキルを使用します。

この方法では、Playwright CLI をローカルにインストールし、エージェントがそれを利用するために必要な知識を提供します。誤解を避けるため、Playwright MCP サーバーはインストールしていません。

インストール中

まず、オープンソースの Microsoft Playwright CLI をインストールしましょう。まだ行っていない場合は、/quit`` と入力して Gemini CLI を終了します。次に、ターミナルで次の操作を行います。

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

スキルを追加しましょう。このコマンドを実行すると、GitHub から Gemini スキルフォルダにスキルサブフォルダが直接ダウンロードされます。

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

これでテストできるようになりました。

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

これにより、指定した URL でブラウザセッションが起動します。

また、Gemini が「ヘッド付き」モード（UI が表示されるモード）で Playwright を使用できるようにしたいと考えています。しかし、スキルは Gemini にその方法を伝えていません。そこで、Core セクションの ~/.gemini/skills/playwright-cli/SKILL.md に次の行を追加しました。

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Playwright を使用したテスト

以前と同様に、アプリケーションを起動する必要があります（まだ実行されていない場合）。最初のターミナルセッションで次の操作を行います。

make dev

次に、別のターミナルセッションで、エージェントが使用するツールを混同しないように、BrowserMCP を一時的に無効にします。Gemini CLI を再起動して、次のコマンドを実行します。

/mcp disable browsermcp

次に、Gemini に Playwright を使用してアプリケーションに移動するよう指示します。ただし、BrowserMCP とは異なり、最初にブラウザを起動する必要はありません。Playwright はローカルプロセスでこれを実行します。

Gemini CLI に次のプロンプトを入力します。

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

（Gemini CLI は、ツールを実行する前に必ず権限を求めます）。

この違いは何ですか？

ブラウザを最初に起動する必要はありませんでした。
ブラウザ拡張機能を起動して接続する必要はありませんでした。
エージェントに最初にログオフを指示する必要はありません。テストは「クリーン」なセッションからインスタンス化されます。
スクリーンショットを撮ってローカルファイルとして保存できます。

しばらくすると、output フォルダに dashboard.png ファイルが表示されます。

Gemini CLI でツール呼び出しが実行されますが、ブラウザ UI は表示されません。これは、Playwright がデフォルトで「ヘッドレスモード」で実行されるためです。

ただし、この修正されたプロンプトで再実行すると、UI も表示されます。

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

Gemini CLI の出力は次のようになります。

いかがでしたか？

8. Antigravity では、すぐにこの機能を利用できます。

Google Antigravity には、Playwright CLI と同様の機能を提供する Browser Subagent が含まれています。Gemini in Antigravity に URL をインタラクティブにスピンアップするようリクエストすると、このサブエージェントが自動的にスピンアップされます。

このサブエージェントは、ユーザーのハイレベルな目標（「ログインフォームが機能するかどうかを確認する」など）を受け取り、スクリーンショットと DOM を介してページレイアウトを視覚的に分析し、クリックとキー操作を自分で判断します。これは、人間と同じようにウェブをナビゲートする視覚的なマルチモーダル AI です。そして何より便利なのは、実行したすべての操作の動画を自動的に録画し、スクリーンショットを撮って、実行した内容の証拠としてローカルワークスペースに直接保存します。Antigravity は、この視覚的な証拠を「アーティファクト」と呼んでいます。

WSL ユーザー向けの注意事項: Antigravity でブラウザエージェントを動作させるのは少し面倒です。 動作させることはできましたが、この環境ではサブエージェントの動作が不安定で信頼性が低いことがわかりました。これが、私が Playwright CLI を気に入っている理由の一つです。

9. ブラウザ自動化のその他のユースケース

ブラウザの自動化は、金曜日の午後のデプロイ前にログインボタンが機能することを確認するだけではありません。LLM をブラウザに直接接続できることに気づくと、自作のエージェントプロジェクトの新しい世界が開かれます。

独自の AI エージェントを構築する場合は、BrowserMCP や Playwright CLI などのツールを使用して、次のような方法で重い処理を行うことができます。

パーソナルリサーチアシスタント: 特定の URL をエージェントに指定してトピックの調査を依頼する場合を考えてみましょう。ただし、そのサイトではログインして複雑なメニューを操作する必要があります。来週に壊れるカスタムウェブスクレイパーを作成する代わりに、エージェントにログインしてデータに移動し、データを要約するように指示するだけです。
「Swivel-Chair」インテグレーター: API がない旧式のイントラネットシステムは、どの企業にもあります。システム A からデータを手動でコピーして、システム B のフォームに貼り付けるような作業です。ブラウザ自動化を備えたエージェントは、ユニバーサルグルーとして機能し、レガシーシステムの画面を読み取って、新しいシステムのフォームに入力できます。
自動トリアージと修復: 午前 3 時にモニタリングシステムから P1 アラートを受信しましたか？エージェントは、特定のダッシュボードの URL を自動的に開き、グラフやログを読み取り（マルチモーダルビジョン機能を使用）、概要を Slack チャンネルに直接投稿できます。これにより、インシデント発生時の貴重な時間を節約できます。

このアプローチの利点は、利用可能な API に制限されなくなることです。人間がブラウザでできることは、エージェントもできます。

10. まとめ

おめでとうございます！AI エージェントに実行してほしいことを平易な英語で伝えるだけで、自動化された堅牢な UI テストを構築して実行できました。脆弱な CSS セレクタや複雑な設定スクリプトは不要です。

学習した内容は次のとおりです。

UI テストは苦痛なものではありません。脆弱な DOM 実装ではなく、テストの意図に焦点を当てることで、メンテナンスのオーバーヘッドを大幅に削減できます。
Model Context Protocol（MCP）により、エージェントはツール、データ、環境にユニバーサルなプラグアンドプレイアクセスが可能になります。
BrowserMCP は、エージェント機能をローカルの既存の Chrome セッションに導入するための優れたツールです。
スキルと Playwright CLI により、反復可能で決定論的な自動化テストを新たなレベルで実現できます。これらはすべて、プログレッシブディスクロージャーによって実現されています。
Antigravity のブラウザサブエージェントは、自律型のマルチモーダルナビゲーションとアーティファクトの記録をすぐに利用できるようにすることで、さらに一歩進んでいます。

さあ、退屈な作業を自動化しましょう。

Useful Links

本日取り上げたツールとコンセプトについて詳しく知りたい場合は、以下のリソースをご覧ください。

Repo Code

agentic-ui-testing GitHub リポジトリ

コアツールとフレームワーク

エージェントのコンセプトとスキル

その他

WSL で Google Antigravity を使用する