← ブログ一覧に戻るホームへ
browser-automation8分で読了

playwright-mcp徹底分析：アクセシビリティツリーとaria-refセレクタが拓く新境地

Microsoftのplaywright-mcpが採用するアクセシビリティツリーとaria-refセレクタの技術的革新性を、ソースコード分析から解明

評価:
5.0 / 5.0
著者: yonaka15
#Playwright#MCP#Browser Automation#Microsoft#Accessibility#Testing

概要

microsoft/playwright-mcpは、Microsoftが開発したブラウザ自動化MCPサーバーです。18,000以上のGitHubスターを獲得し、ブラウザ自動化MCPの標準的な選択肢となっています。最大の特徴は、スクリーンショットではなくアクセシビリティツリーを活用し、Playwright独自のaria-refセレクタで要素を特定する点にあります。私も--isolatedモードと--caps=visionモードを愛用しており、その設計思想の巧みさに感銘を受けています。

aria-refセレクタの革新性

LLMツール以前の話になりますが、ブラウザ自動化における要素特定は永遠の課題でした。CSSセレクタは構造変更に弱く、XPathは複雑になりがちで、画像認識は計算コストが高い。playwright-mcpは、この問題に対して全く新しいアプローチを提示しました。

ソースコードのsrc/tab.tsを分析すると、その核心が見えてきます。

async refLocators(params: { element: string, ref: string }[]): Promise<playwright.Locator[]> {
  const snapshot = await (this.page as PageEx)._snapshotForAI();
  return params.map(param => {
    if (!snapshot.includes(`[ref=${param.ref}]`))
      throw new Error(`Ref ${param.ref} not found in the current page snapshot.`);
    return this.page.locator(`aria-ref=${param.ref}`).describe(param.element);
  });
}

ここで使用されているaria-refは、Playwrightが独自に実装しているセレクタです。通常のaria属性セレクタとは異なり、アクセシビリティツリー内に自動的に付与される参照IDを用いて要素を直接指定できます。これはHTMLのDOM構造とは独立した識別子で、ページの視覚的な変更やDOM構造の変更に対して堅牢です。

実際のスナップショットでは、要素は以下のように表現されます：

- button "送信" [ref=button-42]
- textbox "メールアドレス" [ref=input-17]
- link "ホーム" [ref=link-5]

MCPツールを呼び出す際は、このrefを指定しています：

{
  "tool": "browser_click",
  "parameters": {
    "element": "送信ボタン",
    "ref": "button-42"
  }
}

aria-ref=button-42というセレクタが、アクセシビリティツリー内で該当要素を確実に特定します。対象となる要素を確実に見つけ出し、操作する正確性は、従来のセレクタベースのアプローチとは一線を画しています。

Playwrightの内部APIを活用した巧妙な実装

aria-refの安定性の秘密はPlaywrightの内部API _snapshotForAI()の活用にあるようです。

type PageEx = playwright.Page & {
  _snapshotForAI: () => Promise<string>;
};

このAPIは公開APIではなく、AIモデル向けに設計された内部機能のようです。playwright-mcpはこれを巧みに利用し、ページのアクセシビリティツリーを構造化されたテキスト形式で取得しています。

このAPIが各要素に自動的に一意の参照ID（ref）を付与しています。このrefは、要素がページ内で同一である限り、DOMの変更やスタイルの変更があっても維持されます。CDPなどを使った他のブラウザ自動化よりもPlaywrightを推す理由がここにあります。

スクリーンショットよりアクセシビリティツリーを優先すべき理由

複雑なHTMLであればスクリーンショットによる要素特定も一つの手ですが、可能な限りアクセシビリティツリーを選択すべき理由があります。

データの軽量性：アクセシビリティスナップショットはテキストデータです。画像データと比較して、転送量が大幅に少なくなります。

LLMとの親和性：構造化されたテキストデータは、LLMが直接理解できる形式です。画像認識のような追加の処理層が不要で、トークン効率も良好です。

確実性：aria-refセレクタによる要素特定は、曖昧さがありません。画像認識のような確率的な要素がなく、指定した要素を確実に操作できます。

三つのモードが示す用途別最適化

playwright-mcpは、異なる用途に最適化された三つの動作モードを提供しています。

Isolated Mode - 独立したプロファイル

npx @playwright/mcp@latest --isolated

--isolatedモードは、各セッションで完全に独立したブラウザプロファイルを使用します。プロファイルはメモリ内でのみ管理され、ディスクには保存されません。

このモードの価値は、セッション情報をメモリにのみ保持する点にあります。他のセッションの影響を受けないため、LLMから何度も呼び出されるような場合に起こり得る不正な動作を防ぐことができます。

--storage-stateオプションと組み合わせることで、必要な初期状態（ログイン情報など）を注入することも可能です：

npx @playwright/mcp@latest --isolated --storage-state=auth.json

Vision Mode - 座標ベース操作への対応

npx @playwright/mcp@latest --caps=vision

visionモードの有効化は、当初--visionフラグで提供されていましたが、現在は--caps=visionが推奨されています（後方互換性のため--visionも引き続き動作します）。このモードを指定すると、座標ベースのツールが追加で有効になります：

  • browser_mouse_click_xy - 座標指定クリック
  • browser_mouse_drag_xy - ドラッグ&ドロップ
  • browser_mouse_move_xy - マウス移動

アクセシビリティツリーに含まれない視覚的要素（キャンバス要素、カスタムコンポーネント、複雑なインタラクティブ要素など）を操作する必要がある場合に威力を発揮します。

visionモードは通常のaria-refベースのツールと併用できます。アクセシビリティツリーベースのツールが使える要素はそちらを優先し、座標ベースの操作が必要な場合のみvisionモードのツールを使用するという使い分けが可能です。

標準モード - 永続プロファイルによる状態維持

デフォルトモードでは、ブラウザプロファイルがディスクに保存されます：

  • Windows: %USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
  • macOS: ~/Library/Caches/ms-playwright/mcp-chrome-profile
  • Linux: ~/.cache/ms-playwright/mcp-chrome-profile

ログイン状態やクッキーが保持されるため、ユーザーとの協働的な操作に適しています。

実使用で感じる利点と課題

私がplaywright-mcpを日常的に使用する中で感じている点を共有します。

明確な利点

導入の容易さ：npx @playwright/mcp@latestで即座に利用開始できます。WebDriverのインストールやバージョン管理に悩む必要がありません。

aria-refの安定性：要素のスタイル変更、クラス名の変更、レイアウトの調整などがあっても、アクセシビリティツリーの構造が保たれる限り、自動化は影響を受けません。

改善の余地がある点

モード切り替えの柔軟性のなさ：セッション途中でのモード変更ができません。例えば、最初はisolatedモードで始め、途中から永続プロファイルに切り替えることはできません。

他のツールとの比較

Seleniumとの違い

Seleniumは伝統的なWebDriverプロトコルを使用しますが、playwright-mcpはPlaywrightのCDPベースの実装を活用しています。aria-refセレクタのような革新的な機能は、Seleniumでは実現できません。

他のMCPブラウザ自動化ツールとの違い

私もCDP-MCPというMCPサーバーを開発していますが、こちらはCDPプロトコルを直接操作する低レベルのアプローチです。playwright-mcpはより高レベルで使いやすい抽象化を提供しています。

yonaka15/cdp-mcp

まとめ

playwright-mcpは、ブラウザ自動化の決定版と言ってもいいMCPサーバーです。Playwrightの内部API _snapshotForAI()と独自のaria-refセレクタを組み合わせることで、他の手法とは一線を画す安定性と使いやすさを実現しています。

アクセシビリティツリーをベースにした設計は、単なる技術的選択ではなく、LLMとの親和性、データの軽量性、操作の確実性という複数の利点をもたらしています。三つの動作モードは、それぞれ明確な用途を想定しており、実用性の高さを示しています。

Microsoft製という信頼性、活発なコミュニティ、継続的な改善により、playwright-mcpは必携のブラウザ自動化MCPと言えます。

評価詳細

  • 実装品質: ★★★★★（Playwrightの内部APIとaria-refセレクタの巧妙な活用）
  • 機能の網羅性: ★★★★★（機能充実）
  • 使いやすさ: ★★★★★（シンプルな導入、明確なエラーメッセージ）
  • パフォーマンス: ★★★★★（アクセシビリティツリーによる効率的な実装）
  • エンタープライズ対応: ★★★★★（Microsoft製、大規模コミュニティ）
  • 総合評価: ★★★★★ (5.0/5.0)

アクセシビリティツリーとaria-refセレクタという技術的革新により、ブラウザ自動化の新たな標準を確立したMCPサーバーです。

関連記事