Playwright MCP 入門 - AIエージェントにブラウザ操作と画面確認を任せる

Playwright MCP 入門 - AIエージェントにブラウザ操作と画面確認を任せる

作成日:
更新日:
PlaywrightMCPAIエージェントテスト開発ツール

AI にコードを書かせる体験はかなり成熟しましたが、いまだに残る弱点が「実装したけれど、画面を実際には見ていない」問題です。AI は「できました」と言うものの、本当にボタンが動くか・表示が崩れていないかは、人間が手元でブラウザを開いて確かめるしかない——ということが多い。

Playwright MCP は、ここに効きます。Microsoft 製の MCP サーバーで、AIエージェントにブラウザそのものを渡す。エージェントは自分でページを開き、クリックし、フォームを埋め、結果を確認できます。この記事では、何ができて・どう入れて・どう使うかを整理します。MCP 全般の導入は Claude Code プラグイン導入ガイドも参照してください。

Playwright MCP とは

Playwright MCP（@playwright/mcp、microsoft/playwright-mcp）は、Playwright によるブラウザ自動化を LLM に開放する MCP サーバーです。Claude Code のような MCP クライアントに接続すると、AI が Playwright 経由でブラウザを操作できるようになります。

ブラウザ自動化のテスト基盤としての Playwright は モダンテストフレームワーク（Vitest / Playwright）でも触れましたが、Playwright MCP はその操作を「AI が呼べるツール」として公開するのが役割です。

肝はアクセシビリティツリー（スクショではない）

Playwright MCP の最大の特長は、画面の理解の仕方です。多くの「AI にブラウザを操作させる」手法はスクリーンショットを撮って視覚モデルでピクセルを解釈しますが、Playwright MCP は違います。

Uses Playwright's accessibility tree, not pixel-based input.

つまり、ピクセルではなくアクセシビリティツリー（セマンティックな構造と ARIA 情報）を返します。これにより、

  • 決定的（deterministic）: 同じページなら同じ構造が返る。視覚解釈の揺らぎがない
  • 高速: 画像の生成・解釈の往復が不要
  • 視覚モデル不要: vision 非対応の LLM でも操作できる

「ボタンの座標を当てる」のではなく「button "送信" という要素を操作する」ため、レイアウトのわずかな差で壊れにくいのも利点です。これは前章の WebMCP が目指す「画面を推測させない」方向性とも通じます。

導入

Claude Code（CLI）

Claude Code なら1コマンドで追加できます。

Claude Code に Playwright MCP を追加
claude mcp add playwright npx @playwright/mcp@latest

JSON 設定で追加する場合

VS Code・Claude Desktop など、JSON でMCPサーバーを設定するクライアントでは次のブロックを加えます。MCP サーバー設定の例は Claude Code で Google カレンダー MCP を設定するも参考になります。

mcpServers にPlaywrightMCPを追加
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

npx @playwright/mcp@latest で常に最新版が起動します。

何ができるか（主なツール）

接続すると、エージェントは次のようなツールを使えるようになります。

分類ツール例
ナビゲーションbrowser_navigate、browser_navigate_back
操作browser_click、browser_type、browser_fill_form
確認browser_snapshot（アクセシビリティツリー取得）、browser_take_screenshot
応用browser_drag、browser_hover、browser_evaluate、browser_wait_for
タブ管理browser_tabs

中心になるのが browser_snapshot です。これでページの構造化スナップショット（アクセシビリティツリー）を取得し、それを基にエージェントが「次に何をクリックするか」を決めます。スクリーンショットも browser_take_screenshot で撮れますが、操作の基盤はあくまで構造化スナップショットです。

ネットワーク制御・ストレージ操作・DevTools 連携・座標ベースの視覚操作・PDF 生成・テスト用アサーションといった追加機能は、--caps フラグで必要なものだけ有効化します。

実行モード

用途に応じて起動オプションを使い分けます。

観点既定切り替え
画面表示headed（ブラウザUIを表示）--headless（画面なし環境・CI 向け）
セッションpersistent（ログイン状態をプロファイルに保存）--isolated（毎回まっさらで開始）

NOTE

persistent プロファイルは同時に1つのブラウザインスタンスからしか使えません。同じワークスペースで複数の MCP クライアントが同時に使うと競合します。並行実行したいときは --isolated を使います。ログイン状態を引き継ぎたい作業は persistent、使い捨ての検証は isolated、と使い分けるのが基本です。

使いどころ

  • 実装の自己検証: AI が変更を加えたあと、自分でページを開いて「ボタンが動くか・表示が崩れていないか」を確認する。「実装したが画面を見ていない」問題を構造的に減らせる
  • E2E テストの補助: 手で操作手順を再現し、テストシナリオの叩き台を作る
  • リグレッションの目視代替: 変更前後で画面の構造スナップショットを比べる

ローカルの Chrome に Playwright をアタッチして使う運用は Playwright を手元の Chrome にアタッチするでも扱っていますが、Playwright MCP はその操作を AI に委ねるのが新しい点です。

WARNING

AI にブラウザを渡すということは、ログイン済みセッションでの操作や外部サイトへのアクセスをAI に代行させるということです。persistent プロファイルには認証情報が残るため、機微なアカウントでの無人実行は慎重に。操作対象・権限・確認フローを決めたうえで使ってください。

まとめ

  • Playwright MCP（@playwright/mcp）は Microsoft 製の MCP サーバー。AIエージェントに Playwright のブラウザ操作を開放する
  • 肝はアクセシビリティツリーを使うこと。スクショ・視覚モデルに頼らず、決定的・高速・vision 不要
  • 導入は Claude Code なら claude mcp add playwright npx @playwright/mcp@latest、JSON クライアントは mcpServers に追記
  • browser_snapshot を中心に navigate / click / type / fill_form などを提供。追加機能は --caps で有効化
  • 実行モードは headed/headless と persistent/isolated。persistent は同時1インスタンスのみ、並行なら isolated
  • 使いどころは「実装の自己検証」「E2E の叩き台」「リグレッション目視代替」。認証情報を扱うため権限設計には注意

「AI がコードを書く」の次は「AI が自分で動かして確かめる」です。Playwright MCP は、その自己検証のループをブラウザに広げる現実的な一手になります。

参考リンク