コーディングエージェントに、本物のブラウザでWebアプリを自分でテストさせるには？

操作できるブラウザがあれば、コーディングエージェントはWebアプリを自分でテストできます。作業中にエージェントが確認するだけなら、Playwright MCPのようなブラウザ自動化サーバーか、Playwright CLIを追加します。確認を残しておきたいなら、PlaywrightやPuppeteerのテストをエージェントに書かせて実行させます。MAOでは、エージェントをブラウザポータルにワイヤーでつなぐと、エージェントは mao portal でライブのChromiumページを操作します。そのページはエージェントのターミナルと同じキャンバスにあり、操作の様子を見られます。

エージェントがWebアプリを自分でテストするには何が必要ですか？#

必要なものは3つです。ページを開いて操作する手段、ページの内容を読む手段、そして結果を示す手段です。以下のどの方法もこの3つを備えていて、違うのはその形です。

• 操作： URLを開く、クリックする、フィールドに入力する、キーを押す。
• 読み取り： ページの構造（アクセシビリティツリー）、テキスト、またはスクリーンショット。
• 証明： スクリーンショット、またはエージェントが見せられる成功したテスト。

方法ごとに違うのは、ブラウザがどこで動くか、それが見えるか、そして確認が会話のあとも残るかです。

MCPによるブラウザ自動化はどう動きますか？#

エージェントがMCPサーバーのブラウザツールを呼び出します。Playwright MCPは「Playwrightを使ってブラウザ自動化の機能を提供するModel Context Protocol（MCP）サーバー」で、ピクセルではなくページのアクセシビリティツリーをもとに動きます。

Claude Codeには1つのコマンドで追加できます（Node.js 18以降が必要です）。

claude mcp add playwright npx @playwright/mcp@latest

これでエージェントは browser_navigate、browser_snapshot（ページのアクセシビリティスナップショット）、browser_click、browser_type、browser_fill_form、browser_take_screenshot などのツールを使えます。READMEによると、エージェントはスクリーンショットをもとに操作することはできず、スナップショットをもとに操作します。ブラウザは既定で見えるウィンドウで開き、--headless で隠せます。--device "iPhone 15" でスマートフォンをエミュレートします。

既定では永続的なプロファイルを使うので、ログイン状態はセッションをまたいで残ります。--isolated を付けるとプロファイルをメモリ上に置き、ブラウザを閉じると破棄します。

同じREADMEは、CLIの呼び出しのほうがトークンを使わないため、コーディングエージェントにはPlaywright CLIとそのスキルが向いている場合があるとしています。npm install -g @playwright/cli@latest でインストールし、playwright-cli install --skills でエージェントにスキルを渡します。--headed でブラウザを開かない限り、ヘッドレスで動きます。

エージェントが自分でブラウザテストを書いて実行するには？#

確認をテストとして書いて実行するよう、エージェントに頼みます。テストはリポジトリに残るので、次の変更も同じ確認を通り、CIでも実行できます。

Playwright Testでは、エージェントが npm init playwright@latest でプロジェクトを用意し、npx playwright test でテストを実行します。テストは既定でヘッドレスで動きます。--headed でブラウザを表示し、--ui でPlaywrightのUIモードを開きます。npx playwright show-report でHTMLレポートを開きます。PlaywrightはChromium、WebKit、Firefoxでテストを実行します。

エージェントがチェックアウトページ用に書くテストの例です。

import { test, expect } from '@playwright/test';

test('checkout shows the confirmation', async ({ page }) => {
  await page.goto('http://localhost:3000/checkout');
  await page.getByRole('textbox', { name: 'Email' }).fill('test@example.com');
  await page.getByRole('button', { name: 'Pay' }).click();
  await expect(page.getByRole('heading', { name: 'Thank you' })).toBeVisible();
  await page.screenshot({ path: 'checkout.png', fullPage: true });
});

もう1つのよく使われるライブラリがPuppeteerです。「DevTools Protocol」またはWebDriver BiDiを通じて「ChromeやFirefoxを操作する高レベルAPIを提供するJavaScriptライブラリ」です。npm i puppeteer はインストール時に対応するChromeをダウンロードし、既定でヘッドレスで動きます。エージェントは同じようにこれを使うスクリプトを書きます。

MAOのブラウザポータルはどう動きますか？#

ブラウザポータルは、MAOのキャンバス上でターミナルの横に置かれるライブのChromiumページです。エージェントのターミナルをワイヤーでつなぐと、そのエージェントが mao portal でページを操作します。ほかのエージェントは操作できません。

1. 1New portal を選んでキャンバスに置き、アドレスバーにアプリのアドレスを入力します。
2. 2エージェントのターミナルをポータルに接続します。
3. 3エージェントが mao portal navigate <portal> <url> でページを開きます。
4. 4info、screenshot、snapshot でページを調べ、click、fill、type、key、scroll、text、evaluate で操作します。
5. 5終わったら mao portal close <portal> を実行します。

どのコマンドもワイヤーがまだあるかを確かめるので、ワイヤーを外せばブラウザを取り戻せます。これらのコマンドは開いているポータルを操作するもので、自分でブラウザを起動することはありません。ポータルには、ChromeなどのChromiumブラウザがマシンにインストールされている必要があります。MAOはHomebrew、/Applications、WindowsとLinuxの一般的なインストール先からそれを探します。

エージェントがフォームをテストするときは、次の点が大事です。

• パスワードやワンタイムコードのフィールドは、入力済みかどうかだけをエージェントに見せます。スナップショットでも、mao portal text と mao portal html でも同じです。
• fill は入力後にフィールドの中身を確かめ、フィールドが一度に値を受け付けないときは1キーずつ入力します。
• 隠れている、画面外にある、または覆われている要素をクリックすると、成功ではなくエラーを返します。
• ポータルを開き直したときに残るのは、アクティブなタブだけです。ブラウザのプロファイルデータ、ポップアップ、ダウンロードは含まれません。

それぞれの方法を比べると？#

チェックアウトページの変更をエージェントはどうテストしますか？#

MAOのブラウザポータルを使った一連の流れです。エージェントがチェックアウトページを変更し、開き、フォームに入力し、スクリーンショットを撮って、結果を伝えます。

1. 1アプリの開発サーバーを起動します。
2. 2エージェントのターミナルの横にブラウザポータルを置き、チェックアウトページのローカルアドレスを開いて、エージェントのターミナルをポータルに接続します。
3. 3タスクと確認内容を1つのプロンプトでエージェントに渡します（下記）。
4. 4エージェントがコードを編集し、mao portal navigate でポータルにページを開きます。
5. 5mao portal snapshot でフォームのフィールドと支払いボタンを見つけ、fill で各フィールドに入力し、click でボタンを押します。
6. 6結果に対して mao portal screenshot を実行し、エラーや確認メッセージを正確に知る必要があれば mao portal text でページを読みます。
7. 7何を変えたか、ページに何が表示されたかを、スクリーンショットとともに報告します。壊れていればコードを直し、もう一度確認します。

プロンプト：

Move the coupon field above the card details on the checkout page.
Then open the checkout page in the portal you are connected to, fill
the form with test data, pay, and take a screenshot of the result.
Tell me what you changed and whether checkout still reaches the
confirmation screen.

エージェントがページを開き、読み取り、撮影するために実行するコマンド：

mao portal navigate <portal> http://localhost:3000/checkout
mao portal snapshot <portal>
mao portal screenshot <portal>

その様子は、キャンバス上のポータルで見られます。Playwright MCPでも流れは同じで、mao portal コマンドの代わりに browser_navigate、browser_snapshot、browser_fill_form、browser_click、browser_take_screenshot を使います。流れがうまくいったら、それをPlaywrightのテストにするようエージェントに頼めば、確認が残ります。

代わりにデバイスポータルが必要になるのはいつですか？#

テストする対象がデスクトップのブラウザではなくスマートフォンで動くときは、デバイスポータルを使います。PlaywrightとPuppeteerは、デスクトップのブラウザエンジンの中でスマートフォンの画面サイズ、ユーザーエージェント、そして（Playwrightでは）タッチをエミュレートします。MAOのデバイスポータルには、本物のAndroidエミュレーター、コンピューターにつないだAndroidスマートフォン、またはiOS Simulatorが入ります。

• Android： New device portal を選び、エミュレーターか接続済みのデバイスを選びます。MAOにはAndroid SDKツールか接続済みのデバイスが必要で、ANDROID_HOME、Homebrew、SDKの既定のフォルダから adb とエミュレーターを探します。
• iOS： Xcodeを入れたMacでは、デバイスポータルに既存のiOS Simulatorを表示できます。シミュレーターの作成と削除はXcodeで行います。エージェントが mao portal launch でアプリを起動すると、アプリのアクセシビリティツリーを読めます。

ワイヤーでつながれたエージェントは、info、screenshot、snapshot でデバイスを調べ、click、swipe、type、button、launch、terminate、boot、shutdown で操作します。デバイスの画面はポータルが画面上にある間ストリーミングされ、画面外のポータルや折りたたまれたポータルではストリーミングが止まります。

よくある質問#

出典#

• Playwright MCP README：Playwright MCPとは何か、アクセシビリティツリーを使う方式、Claude Codeへのインストールコマンド、Node.js 18、ツール名、既定で表示されること、--headless、--device、永続的なプロファイルと --isolated、コーディングエージェント向けのCLIについての記述。
• Playwright CLI README：インストールとスキルのコマンド、既定でヘッドレスであることと --headed。
• Playwright：インストール：npm init playwright@latest、npx playwright test、--headed、--ui、HTMLレポート、対応ブラウザ。
• Playwright：テストを書く：getByRole、fill、click、toBeVisible アサーション。
• Playwright：スクリーンショット：page.screenshot と fullPage。
• Playwright：エミュレーション：ユーザーエージェント、画面サイズ、ビューポート、タッチのデバイスエミュレーション。
• Puppeteer：Puppeteerとは何か、使うプロトコル、既定でヘッドレスであること、インストール時のChromeのダウンロード。
• Puppeteer：page.emulate()：画面サイズとユーザーエージェントのエミュレーション。
• ブラウザポータルとデバイスポータル：ポータルでできること、Chromiumが必要なこととMAOがそれを探す場所。
• ブラウザポータルを開く：ポータルの配置、その操作部、開き直したときに残るもの。
• 許可したブラウザをエージェントに操作させる：mao portal コマンドと接続の確認。
• Androidデバイスポータルを操作する：Androidの準備、デバイスのコマンド、ストリーミング。
• iOS Simulatorポータルを表示する：macOS専用のiOS Simulatorポータル。
• MAO 0.11.6 リリースノート：パスワードとワンタイムコードを伏せること、fill の確認、クリックのエラー。
• MAO 0.8.0 リリースノート：iOS Simulatorへの対応、起動時のアクセシビリティツリー、MAOがChromiumとAndroidのツールを探す方法。
• MAO 0.11.0 リリースノート：エージェントのコマンドが mao であること。

確認日：2026-10-28。