1. はじめに
エージェント型 AI の革命は、ソフトウェアの構築方法を変革し、プロセス全体を非常にクールでエキサイティングでアクセスしやすいものにしています。以前は開発者が数か月かけて完了していたタスクやプロジェクトを、エージェント ツールを使用して 1 回のセッションで完了できるようになりました。
エージェントによる変革が期待される分野の 1 つが、ウェブ アプリケーションのテストです。従来、ウェブアプリのテストは面倒で、脆弱性との戦いが絶えませんでした。しかし、この複雑さを完全に回避できるとしたらどうでしょうか。エージェントにテストする内容を平易な自然言語で伝え、エージェントに実行方法を推論させることができたらどうでしょうか?

この Codelab では、Antigravity CLI をエージェント スキルや BrowserMCP などのマルチモーダル MCP ツールとともに使用する方法について説明します。自然言語を使用して自動化された UI テストを作成して実行する方法を説明します。エージェント ツールが複雑なタスクを処理し、ビルダーとしてスーパーパワーを発揮する方法を示します。
この Codelab では、UI 自動化とブラウザのリモート制御という特定のユースケースに焦点を当てていますが、重要なのは、基盤となる原則と、それによって実現される可能性の広がりです。エージェントにローカル CLI と MCP サーバーの使用方法を教えることで、時間や専門知識がなければ処理できない複雑なワークフローを委任できます。
ラボの内容
- Antigravity CLI と、Antigravity エコシステムにおけるその位置付け。
- Model Context Protocol(MCP)の概要とその重要性。
- BrowserMCP を使用して AI エージェントがウェブブラウザを制御する方法。
- Antigravity CLI から自動 UI テストを実行する方法。
- エージェントのスキルとそのメリットについて理解する。
- スキルを使用して Playwright を使用するようにエージェントをトレーニングする。
- Antigravity の組み込みブラウザ エージェントについて。
- ブラウザ制御のその他のユースケース。
演習内容
この Codelab では、Antigravity CLI、MCP ツール、エージェント スキル、React デモ アプリケーションを使用します。
次のことを行います。
- 開発環境をセットアップします。
- テストが必要なデモ アプリケーションを確認します。
- Antigravity CLI を使用して、BrowserMCP 経由でアプリケーションを操作します。
- エージェント スキルを使用して、Playwright の使用方法をエージェントに教えます。
2. Antigravity エコシステム
2026 年 5 月に、Google は新しい Antigravity スイートをリリースしました。これは Antigravity の大幅な見直しであり、次の 4 つのプロダクトに分割されました。
- Antigravity 2.0 は、デスクトップ上のエージェント ファーストの専用「ビルダー」環境になりました。特に、IDE は含まれていません。代わりに、エージェント マネージャーとのみやり取りします。このサーフェスは、コードを気にすることなく、エージェントを使用して「アイデアからプロダクトへ」の時代を切り開くことを目指しています。コーディングの経験がない多くのビルダーに喜んでいただけるでしょう。
- Antigravity IDE。Antigravity エージェント ハーネスでサポートされており、より使い慣れた VS Code のようなコーディング環境を提供します。ここでは、エージェント支援型の開発を行うことができ、常にコードが表示されます。コーダーはここで快適に作業できます。
- Antigravity SDK。Antigravity を強化するハーネスとツールを提供しますが、Python エージェント SDK として公開されます。google.antigravity からインポートすることで、Antigravity の機能をプログラムで活用できます。
- Antigravity CLI。これは、非常に優れた Gemini CLI の次の進化形です。Gemini モデルとのやり取りには、引き続きターミナル ファーストの環境が使用されます。しかし、新しい Antigravity CLI は Go で構築されており、起動時と一般的な使用時の両方で、Gemini CLI よりもはるかに高速に感じられます。Antigravity 2.0 と IDE と同じエージェント「ハーネス」を活用しているため、Antigravity スイート全体で共通の設定と構成が可能です。
このラボでは Antigravity CLI の使用に重点を置いていますが、このラボのすべての操作は Agy IDE または Agy 2.0 でも実行できます。
3. 前提条件
楽しい内容に入る前に、必要なものがすべて揃っていることを確認しましょう。
ツール
このラボは、次のものが揃っていることを前提としています。
- Chrome ブラウザ
- Node.js
- Antigravity CLI
- Git
Antigravity CLI を使用するには、Google で認証する必要があります。agy を初めて起動すると、デフォルトのウェブブラウザで Google ログインを求めるメッセージが自動的に表示されます。このオプションには、Gemini の使用量に対する無料割り当てが大幅に用意されており、Google Cloud プロジェクトは必要ありません。Gemini API キーまたは Google Cloud プロジェクトをお持ちの場合は、こちらも自由に構成できます。
この手順は、Linux(または WSL)または macOS 環境で作業していることを前提としています。Windows を使用している場合は、WSL を使用して手順を進めることができます。
(BrowserMCP は、同じマシンで実行されているローカル ブラウザにのみ接続するため、Google Cloud Shell からは機能しません)。
開発環境をセットアップする
GitHub にデモ リポジトリを作成しました。これには、UI テストに使用できるサンプル アプリケーションが含まれています。ローカル ターミナルから次のコマンドを実行して、クローンを作成します。
git clone https://github.com/derailed-dash/agentic-ui-testing cd agentic-ui-testing
デモアプリを起動するための環境を簡単に設定できるように、Makefile が用意されています。これを実行して環境を初期化しましょう。
make install # Or if you don't have make npm install --prefix demo-app
4. デモ アプリケーション
本日テストするアプリは、セキュリティ テレメトリーを管理するための未来的なダークテーマのダッシュボードである The Dazbo Omni-Dash です(バイブコードで作成されています)。

このアプリがおすすめの理由
これは、次のような現実的なテスト サーフェスを提供するために構築されています。
- モック認証: 特定の認証情報を必要とするログインフロー。
- 動的コンテンツ: リアルタイム データをシミュレートするテレメトリー カードとセキュリティ ログ。
- インタラクティブな状態: ユーザーの操作に応じて変化するナビゲーション メニューとフォーム入力。
- 最新のテクノロジー: React と Vite で構築され、高速で応答性の高いエクスペリエンスを実現します。
アプリを起動する
アプリケーションを開始するには、次のコマンドを実行します。
make dev # Or if you don't have make npm run dev --prefix demo-app
開発用サーバーはすぐに起動し、アプリは http://localhost:5173 で利用できるようになります。

リンクをクリックするだけで、ブラウザでアプリケーションを開くことができます。このプロセスはターミナルで実行したままにしておきます。以降のターミナル コマンドは、別のターミナル セッションで実行します。
5. UI テストの課題
従来の UI テストは、正しく行うのが非常に難しく、保守もさらに困難です。一般的な課題は次のとおりです。
- 学習コストが高い: 基本的な操作を自動化するためだけに、複雑なドメイン固有言語やフレームワーク固有の癖(Selenium や Playwright など)を習得するために、デベロッパーが膨大な時間を費やす必要があります。
- セレクタの脆弱性と自動化: 従来のスクリプトは、厳格な DOM 構造(
div > div > buttonなど)や特定のテキストラベルに依存しています。たとえば、[ログアウト] ボタンの名前を [ログオフ] に変更したり、ボタンをまったく別のメニューに移動したり、HTML の構造を変更したりすると、従来のテストツールは動作しなくなり、スクリプトのメンテナンスが常に必要になります。 - テストの「不安定さ」: タイミングの問題、競合状態、アセットの読み込みの遅さなどが原因で、1 分後に合格したテストが不合格になる。
- 環境のパリティ: 再現が難しいアプリケーションの状態や、テストデータのクリーンアップのオーバーヘッドに苦労しています。

意図と実装
これらの問題を解決するには、実装ではなくインテントに焦点を当てたテスト方法が必要です。
エージェント型 AI ツールを活用することで、UI の小さな変更や構造的な変更から完全に分離された、再現可能な自動化を作成できます。エージェントは、名前、ラベル、オブジェクトの正確な階層をハードコードするのではなく、ユーザーの自然言語の意図に基づいてアクションを実行します。ボタンが移動したり、ラベルがわずかに変更されたりした場合でも、エージェントのマルチモーダル機能により、要素を特定してタスクを正常に完了できます。
6. 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 プロバイダを切り替えたり、ツールをアップグレードしたりしても、コア統合インフラストラクチャは完全に変更されません。
7. BrowserMCP を使用した自動化
BrowserMCP とは
これが本日使用する最初のツールです。BrowserMCP は、ウェブブラウザとやり取りするために AI エージェントに必要な「目」と「手」を提供する MCP サーバーです。簡単に言うと、ブラウザに対する人間の操作を模倣します。オープンソースであり、こちらで GitHub リポジトリを確認できます。メインの BrowserMCP ドキュメントはこちらをご覧ください。

主な機能は次のとおりです。
- URL に移動できます。
- DOM を検査できます。
- ボタンをクリックしたり、フォームにテキストを入力したりできます。
- ドラッグ&ドロップできます。
- ブラウザ コンソール ログを読み取ることができます。
- 高速: 自動化はローカルマシンで行われます。
ブラウザ MCP のインストール
BrowserMCP を使用するには、次の 2 つの手順が必要です。
- BrowserMCP 拡張機能を Chrome(または Chromium ベースのブラウザ)にインストールします。
- Antigravity の構成で MCP サーバーを手動で構成します。
拡張機能をインストールするには、こちらの手順に沿って操作します。インストールは数秒で完了します。インストールが完了したら、拡張機能の [Connect] をクリックして、現在のタブをエージェントで制御できるようにします(現在のタブはデモ アプリケーションが実行されているタブである必要があります)。

次に、Antigravity で実際の MCP サーバーを構成します。これを行うには、グローバル mcp_config.json ファイルに browsermcp サーバー定義を追加します。
~/.gemini/config/mcp_config.json ファイルを作成または編集して、次の構成を追加します。
{
"mcpServers": {
"browsermcp": {
"command": "npx",
"args": [
"-y",
"@browsermcp/mcp@latest"
]
}
}
}
Antigravity エコシステムで MCP サーバーとスキルを設定する詳細な手順については、次のリソースをご覧ください。
BrowserMCP でのテスト
それでは、魔法をかけましょう。まず、新しいターミナル セッションで Antigravity CLI(agy を実行)を起動します(デモ アプリケーションは最初のターミナル セッションで実行されています)。インタラクティブ TUI 内で /mcp と入力して、アクティブなツールのリストを確認し、browsermcp が使用可能であることを確認します。
デモアプリをまだ起動していない場合は、ここで起動します。
make dev
まだ行っていない場合は、Chrome ブラウザでアプリを開き、そのタブで BrowserMCP 拡張機能を接続する必要があります。run コマンドのリンクに沿って操作します。次に、BrowserMCP 拡張機能のアイコンをクリックし、[接続] をクリックします。

これで、Agy CLI を使用してテストを実行できます。次のプロンプトをコピーして 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.
CLI は、まず指定されたポートでデモ アプリケーションが実行されているかどうかを確認します。次に、ツールが実行する予定のアクションを確認するよう求めるメッセージが表示されます。

このセッションで CLI がすべての BrowserMCP ツールを実行できるようにします。ブラウザに戻ると、自動化された操作が実行されます。
上記のプロンプトに関する注意点は次のとおりです。
- まず、アプリケーションがすでにログインしている場合は、エージェントにログアウトを指示します。「Exit Gateway」などの特定のテキストをクリックするようエージェントに指示する必要はありません。クリックする場所を判断できるほどスマートです。
- ログインしてメインページをレンダリングした後、エージェントはテレメトリー情報を取得します。ここでも、特定タイルの検索や特定単語のマッチングをエージェントに指示する必要はありません。そのため、後でこのページに表示される情報を拡張または変更しても、このプロンプトは引き続き機能し、出力は引き続きマークダウン テーブルにキャプチャされます。
便利ですよね。
BrowserMCP はこれで完了です。ブラウザで 切断します。
8. スキルと Playwright を使用した自動化
BrowserMCP の制限事項
BrowserMCP は優れていますが、いくつかの制限があります。次に例を示します。
- BrowserMCP 拡張機能が接続された既存のブラウザ セッションが必要です(新しいセッションは生成されません)。
- Chromium 以外のブラウザはサポートされていません。
- MCP サーバーが実行されているのと同じマシンで、別のブラウザ プロセスを実行する必要があります。
- ローカル ファイル システムを操作することはできません。たとえば、スクリーンショットの証拠となるローカル ファイルを作成したり、ダウンロード可能な PDF などのウェブ アプリケーションからファイルをダウンロードして保存したりすることはできません。
- 非決定論的です。ユーザーが指示したアクションを実行しようとしますが、予期しないポップアップなどのローカル状態によってインタラクションが中断される可能性があります。
- 「ヘッドレス」オペレーションはサポートされていません。つまり、実際のブラウザ ウィンドウなしで CI/CD パイプラインで実行することはできません。
Playwright
Playwright は、より洗練されたツールです。これは、確立されたオープンソースのブラウザ自動化およびテスト フレームワークです。BrowserMCP ではできない多くの操作(上記のすべての項目を含む)を行うことができます。
複雑で信頼性が高く、繰り返し可能なテスト シナリオの実行に適しており、特に長時間実行されるセッションの操作や、複数の独立したセッションの並列実行に適しています。
ただし、このような追加機能には、より急な学習曲線が伴います。
スキル
幸いなことに、Playwright の使い方を直接学ぶ必要はありません。代わりに、エージェント スキルを使用できます。

では、エージェント スキルとは具体的にどのようなものなのでしょうか?特定のタスクを実行する必要がある場合に AI エージェントに渡すことができる、ドメインの専門知識が詰まったパッケージと考えることができます。これには、特定のタスクに合わせて調整された手順、ベスト プラクティス、ヘルパースクリプトが含まれています。
ここで重要なのは、プログレッシブ開示です。考えられるすべての API ドキュメントとテスト フレームワークのルールを LLM の初期システム プロンプトに詰め込むと、コンテキスト ウィンドウが消費され、トークンが大量に消費されます。そうではなく、エージェントは実際に必要なときにのみスキルを読み取ります。ベースラインのコンテキストを簡潔に保ち、詳細な「ハウツー」をジャストインタイムで取得します。スキルには、特定の MCP サーバーを活用してタスクを完了する方法の手順を含めることができます。
映画「マトリックス」のシーンを思い出してください。エージェントが問題を見て、Playwright を知る必要があることに気づき、スキルをダウンロードすると、突然「カンフーを知っている」と言います。一瞬で専門家になるのです。
スキルについて詳しくは、以下をご覧ください。
スキルが Playwright に最適な理由
ここでスキルを使用するのは良い選択です。Playwright は非常に強力ですが、構文が難しい場合があります。エージェントに Playwright スキルを付与することで、LLM が古い構文を幻覚したり、脆弱なセレクタを記述したりする心配がなくなります。Playwright を適切に使用する方法に関する、厳選された信頼できるハンドブックをエージェントに提供することになります。
Playwright CLI とその関連スキルを使用します。
この方法では、Playwright CLI をローカルにインストールし、エージェントがそれを利用するために必要な知識を提供します。誤解を避けるため、Playwright MCP サーバーはインストールしていません。
インストール中
まず、オープンソースの Microsoft Playwright CLI をインストールしましょう。まだ行っていない場合は、/quit`` と入力してインタラクティブ 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 を一時的に無効にします。Antigravity CLI(agy)を再起動します。TUI を介して browsermcp サーバーを一時的に無効にできます。
- プロンプト ボックスに
/mcpと入力して、MCP 管理パネルを開きます。 - 矢印キー(上 / 下)を使用して
browsermcpを選択し、Enter キーまたは Return キーを押します。 - 右に移動して [無効にする] を選択し、Enter キーを押してオフに切り替えます。

次に、Playwright を使用してアプリケーションに移動するようエージェントに指示します。ただし、BrowserMCP とは異なり、最初にブラウザを起動する必要はありません。Playwright はローカル プロセスでそれを実行します。
Agy 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.
(いつものように、CLI はツールを実行する前に権限を求めます)。
この違いは何ですか?
- ブラウザを最初に起動する必要はありませんでした。
- ブラウザ拡張機能を起動して接続する必要はありませんでした。
- エージェントに最初にログオフするように指示する必要はありません。テストは「クリーン」なセッションからインスタンス化されます。
- スクリーンショットを撮ってローカル ファイルとして保存できます。
出力フォルダに dashboard.png ファイルが表示されます。
ツール呼び出しは Agy 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 record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.
Agy CLI の出力は次のようになります。

いかがでしたか?
9. Antigravity の組み込みブラウザ エージェント
Google Antigravity には、独自の組み込みブラウザ エージェント(ブラウザ サブエージェント)が搭載されており、Playwright CLI などの別のツールをインストールしなくても、すぐにブラウザの自動化を利用できます。
仕組み
ブラウザを制御するために、組み込みのブラウザ エージェントは Chrome DevTools Protocol(CDP)を介して直接動作するため、Antigravity 2.0 と IDE でブラウザ拡張機能や中間プラグインは必要ありません。
起動すると、Antigravity は WebSocket 接続を介してローカル デバッグポート経由で Chrome インスタンスに接続します。エージェントからの高レベルの指示は、次の低レベルの CDP コマンドに直接変換されます。
- ページ DOM を操作する(要素のクリックやテキストの入力など)。
- ブラウザの状態を制御し、ナビゲーションをトリガーします。
- リアルタイムのフレームと視覚データをキャプチャします。
サブエージェントは、直接的な CDP 制御と視覚的なマルチモーダル分析を組み合わせることで、高レベルの目標(「ダッシュボードに正しいテレメトリー値が表示されていることを確認する」など)を取得し、ページを視覚的に分析して必要なアクションを特定し、それらを自身で実行します。また、アクションの動画を自動的に録画してスクリーンショットを撮り、テスト実行の視覚的な証拠として、アーティファクトとしてワークスペースに直接保存します。
ツールの利用状況
組み込みのブラウザ エージェントは、ターミナル ファーストの Antigravity CLI(Agy CLI)ではまだサポートされていません。ただし、Antigravity IDE と Antigravity 2.0 ではすぐに使用できます。今後のリリースで、ブラウザ エージェントのサポートが Agy CLI に追加される予定です。
WSL ユーザー向けの注: WSL で Antigravity を動作させるブラウザ エージェントの取得が、以前よりもはるかに簡単になりました。複雑なネットワーク ルーティングやポート転送を行うのではなく、WSL 構成で「ミラーリングされた」ネットワーク モードを有効にするだけで済みます。完全な手順については、ガイドの Resolving WSL Friction with Google Antigravity: The Agy 2.0 and Agy IDE Edition をご覧ください。
10. ブラウザ自動化のその他のユースケース
ブラウザの自動化は、金曜日の午後のデプロイ前にログイン ボタンが機能することを確認するだけではありません。LLM をブラウザに直接接続できることに気づくと、エージェントベースの自社製プロジェクトの新しい世界が開かれます。
独自の AI エージェントを構築する場合は、BrowserMCP や Playwright CLI などのツールを使用して、次のような方法で重い処理を行うことができます。
- パーソナル リサーチ アシスタント: 特定の URL をエージェントに指定してトピックを調査するよう依頼したとします。ただし、そのサイトではログインして複雑なメニューを操作する必要があります。来週には機能しなくなるカスタム ウェブ スクレイパーを作成する代わりに、エージェントにログインしてデータに移動し、要約するよう指示します。
- 「Swivel-Chair」インテグレーター: API がない旧式のイントラネット システムは、どの企業にもあります。システム A からデータを手動でコピーして、システム B のフォームに貼り付けるようなシステムです。ブラウザ自動化を備えたエージェントは、旧式のシステムの画面を読み取り、新しいシステムのフォームに入力することで、万能の接着剤として機能します。
- 自動トリアージと修復: 午前 3 時にモニタリング システムから P1 アラートが届きましたか?エージェントは、特定のダッシュボードの URL を自動的に開き、グラフやログを読み取り(マルチモーダル ビジョン機能を使用)、概要を Slack チャンネルに直接投稿できます。これにより、インシデント発生時の貴重な時間を節約できます。
このアプローチの利点は、利用可能な API に制限されなくなることです。人間がブラウザでできることは、エージェントもできます。
11. まとめ
おめでとうございます!AI エージェントに実行してほしいことを平易な英語で伝えるだけで、自動化された堅牢な UI テストを構築して実行できました。脆弱な CSS セレクタや複雑な設定スクリプトは不要です。
学習した内容は以下のとおりです。
- UI テストは苦痛を伴うものではありません: 脆弱な DOM 実装ではなく、テストの意図に焦点を当てることで、メンテナンスのオーバーヘッドを大幅に削減できます。
- Model Context Protocol(MCP)により、エージェントはツール、データ、環境にユニバーサルなプラグ アンド プレイ アクセスが可能になります。
- BrowserMCP は、ローカルの既存の Chrome セッションにエージェント機能を導入するための優れたツールです。
- スキルと Playwright CLI により、反復可能で決定論的な自動化テストの新しいレベルが実現します。これらはすべて、プログレッシブ開示によって実現されています。
- Antigravity のブラウザ サブエージェントは、自律型のマルチモーダル ナビゲーションとアーティファクトの記録をすぐに利用できるようにすることで、すべてをさらに一歩進めます。
さあ、退屈な作業を自動化しましょう。
12. 参考情報
本日取り上げたツールとコンセプトについて詳しく知りたい場合は、以下のリソースをご覧ください。
Repo Code
- agentic-ui-testing GitHub リポジトリ - この Codelab が役に立った場合は、リポジトリにスターを追加してください。
コアツールとフレームワーク
- BrowserMCP GitHub リポジトリ
- BrowserMCP のドキュメント
- Playwright
- Google AI Studio
- Antigravity CLI のインストール
- Nodejs
エージェントのコンセプトとスキル
- Antigravity CLI と IDE の MCP サーバーとスキルを構成する
- エージェントを 11 にダイヤル: お気に入りの MCP サーバー
- Romin Irani 氏による チュートリアル: Google Antigravity Skills を使ってみる
- Codelab: 反重力スキルを使ってみる
- My Original Blog: Creating an Automated UI Test in Seconds(英語)
その他