Playwright 1.64のWebMCPをテストする：ページが公開するWebツールをE2Eで呼び出す

WebアプリがAI向けのツールを公開する
Playwright 1.64でWebMCPを列挙する
ツールを直接呼び出して結果を検証する
Playwright MCPとplaywright-cliからも見える
テストで押さえる境界
まとめ

WebアプリがAI向けのツールを公開する

最近のWebアプリには、画面をクリックする代わりに、AIエージェントが呼び出せる「ツール」を公開する設計があります。商品検索や予約確認のような処理を、名前と入力スキーマ付きで提供するイメージです。

このとき気になるのが、ツールの登録内容と実行結果をどうテストするかです。画面を開いてボタンを押すE2Eテストだけでは、AI向けの入口を検証できません。

Playwright 1.64でWebMCPを列挙する

Playwright 1.64では、ページがWebMCPに登録したツールへアクセスするAPIが追加されました。WebMCP自体は実験的なブラウザAPIなので、本番導入の可否は対象ブラウザの対応状況と合わせて確認してください。

import { chromium } from '@playwright/test';

const browser = await chromium.launch({
  args: ['--enable-features=WebMCP'],
});
const page = await browser.newPage();
await page.goto('http://localhost:3000');

const tools = await page.webmcp.tools();
console.log(tools.map((tool) => tool.name));

page.webmcp.tools()はページが登録したツールの名前や説明を取得します。まずここを検査すれば、登録漏れや想定外の公開をテストできます。

ツールを直接呼び出して結果を検証する

ツールの実行にはcallTool()を使います。画面の状態ではなく、AIが受け取る結果そのものをアサーションできるのがポイントです。

const result = await page.webmcp.callTool('add', {
  a: 2,
  b: 40,
});

expect(result.content[0].text).toBe('42');

実際のテストでは、正常系だけでなく、必須入力がない場合・権限のない利用者・存在しない商品IDなども確認します。ツール名と入力値がAPIのように固定されるため、UIの文言変更とは別に契約を保ちやすくなります。

Playwright MCPとplaywright-cliからも見える

Playwright MCPでは、ページが公開したツールがwebmcp_接頭辞付きでエージェントに提供されます。不要なページツールを受け付けたくない場合は、--no-webmcpで無効化できます。

CLIからは次のように一覧と呼び出しを試せます。

playwright-cli webmcp-list
playwright-cli webmcp-call search_catalog --params '{"query":"cats"}'

テストで押さえる境界

WebMCPのテストは「ツールがあるか」だけで終わりません。入力スキーマ、認証・認可、外部APIの失敗、個人情報を含む結果の扱いまで、通常のAPIテストと同じように確認します。

また、WebMCPは実験的なブラウザAPIです。Playwright 1.64の公式リリースノートでは、Chromium起動時に--enable-features=WebMCPを指定する例が示されています。CIで動かす場合は、使っているブラウザ版と起動フラグを固定し、対応状況が変わったときに早く気づけるようにしておくのが安全です。