Microsoft 製の ブラウザ操作 MCP が実用レベルだった件
はじめに
従来のブラウザ操作MCPの主な課題は、大量のコンテキスト消費でした。AI エージェントがブラウザを操作する際、ブラウザのスクリーンショットを base64 エンコードしてコンテキストに渡していたためです。このため、一度の操作でも膨大なトークン数を消費してしまい、処理効率が大幅に低下していました。
このため、数回の操作を必要とする程度の簡単な操作さえ、エージェント上で完了することはできませんでした。
つまり、従来のブラウザ操作系MCPは実用レベルに達していませんでした。
結論
以下の動画を見てください。
自然言語による指示によって、ローカル環境でログイン処理を行う様子
データの追加と結果の確認を行う様子
Microsoft 製の ブラウザ操作 MCP = Playwright MCP は実用レベルに達していました！
おわり。
おまけ
コンテキスト長問題の解決
Playwright MCP の最大の利点は、ブラウザ操作時のコンテキスト長を大幅に削減できる点です。
従来の方法との比較
従来のブラウザ自動化ツールでは、ページの視覚的な表現に依存していました：
-
スクリーンショットの base64 エンコード
- 低解像度であっても画像データはテキストよりもはるかに大きい
-
視覚的な要素特定の曖昧さ
- 画像ベースのアプローチでは、要素の位置や見た目が変わると失敗しやすい
- ピクセル単位の操作は環境依存性が高い
Playwright MCP のアプローチ
Playwright MCP は、Microsoft の公式リポジトリによると、画像ではなくアクセシビリティツリーに基づくテキストベースのデータ構造（Playwright の Aria snapshots）を使用します：
# アクセシビリティスナップショットの例（シンプルなログインフォーム）
- form "Login Form":
- heading "Welcome back" [level=1]
- textbox "Username"
- textbox "Password" [type=password]
- button "Sign in"
- link "Forgot password?"
このアクセシビリティスナップショットは、ページ内の要素の階層構造を YAML 形式で表現したものです。各要素は以下の情報を含みます：
- 役割（例：button、textbox、heading）
- アクセシブルな名前（例：「Sign in」、「Username」）
- 属性（例：level=1、checked、disabled）
このアプローチにより：
- データ量の削減：画像よりもテキストの方がはるかにトークン数が少ない
- 構造的な情報の保持：視覚情報よりも意味的な構造を表現
- 環境非依存：レイアウトやスタイルの変更に影響されにくい
セットアップ方法
Cursor 内で Playwright MCP を使用するには、mcp.json に以下の設定を追記します：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
その他の設定方法や詳細なオプションについては、Playwright MCP GitHubを参照してください。
トラブルシューティング
ブラウザセッションエラー
Error: Navigation failed: page.goto: Target page, context or browser has been closed
このエラーは主にチャット中断時やセッション不正終了時に発生します。
解決策：
- Cursor のリロード
- 操作終了時に明示的にブラウザを閉じる（
browser_close()）
実装比較
現在、Playwright ベースの MCP 実装にはいくつか種類があります。
今回記事で取り上げたのは Microsoft 版の実装になるので、混同しないように注意してください。
| 機能/特性 | ExecuteAutomation 版 | Microsoft 版 |
|---|---|---|
| 開発元 | コミュニティ | Microsoft 公式 |
| リリース時期 | 2024 年 12 月 | 2025 年 3 月 |
まとめ
Playwright MCP は、ARIA アクセシビリティスナップショットを活用することで、ブラウザ自動化におけるコンテキスト長の問題を効果的に解決しています。このアプローチにより、AI アシスタントによるブラウザ操作がより効率的かつ信頼性高く実行可能になりました。
特に開発環境での作業や複雑な Web アプリケーションの操作において、このツールの価値が発揮されます。今後、さまざまな活用例が共有されることを楽しみにしています。
Discussion