Playwright MCP Server注目

Playwright MCP Server とは？

Playwright MCP Server は、Playwright を使って AI エージェントにブラウザ自動化機能を提供する Microsoft 公式の playwright mcp パッケージ（@playwright/mcp）です。LLM はスクリーンショットではなく構造化されたアクセシビリティスナップショットを通じて Web ページを読み取り操作するため、ビジョンモデルは必要ありません。

このプロジェクトは Apache-2.0 ライセンスのオープンソースで、microsoft/playwright-mcp リポジトリで管理されています。デフォルトでは stdio 経由でローカル実行され、MCP クライアントが URL で接続するスタンドアロンの HTTP サーバーとして起動することもできます。

Playwright MCP Server の使い方

前提条件：Node.js 18 以降と、Claude Code、Claude Desktop、Cursor、VS Code、Windsurf、Codex、Goose などの MCP クライアント。API キーやアカウントは不要です。

標準設定はほとんどのクライアントで動作します：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

追加オプションは args リストに加えます。例："--headless"、"--browser=firefox"、"--isolated"。

Claude Code

claude mcp add playwright npx @playwright/mcp@latest

Claude Desktop

MCP のインストールガイドに従い、上記の標準設定を Claude Desktop の設定ファイルに貼り付けます。

Cursor

Cursor Settings -> MCP -> Add new MCP Server を開き、command タイプを選んで npx @playwright/mcp@latest を入力します。README にはワンクリックのインストールボタンもあります。

VS Code

VS Code の MCP 設定で標準設定を使うか、コマンドラインからインストールします：

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

インストール後、VS Code の GitHub Copilot エージェントからサーバーを利用できます。

Codex

codex mcp add playwright npx "@playwright/mcp@latest"

または ~/.codex/config.toml に追加します：

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]

Windsurf

Windsurf の MCP ドキュメントに従い、上記の標準設定を使います。

スタンドアロン HTTP サーバーと Docker

playwright mcp server を常駐プロセスとして動かす場合（たとえば IDE がヘッド付きブラウザを開けないマシン）、ポートを指定して起動します：

npx @playwright/mcp@latest --port 8931

続いてクライアントをそのエンドポイントに向けます：

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

Docker イメージ（mcr.microsoft.com/playwright/mcp）も公開されていますが、現時点ではヘッドレス Chromium のみ対応です。

Playwright MCP Server の主な機能

• アクセシビリティツリーベース：エージェントはピクセルではなく構造化されたページスナップショットで動作するため、操作が速く決定的です。
• ビジョンモデル不要：テキスト LLM ならどれでもブラウザを操作でき、スクリーンショットは任意です。
• 複数ブラウザ対応：--browser で chrome、firefox、webkit、msedge を選択でき、--device や --mobile でモバイル端末をエミュレートできます。
• 柔軟なプロファイル：デフォルトは永続プロファイル（ログイン状態がセッション間で保持）、--isolated によるメモリ内の分離セッション（--storage-state と併用可）、または Playwright ブラウザ拡張機能で起動中の Chrome や Edge のタブを再利用できます。
• オプトイン機能：PDF 出力、座標ベースのマウス操作、DevTools のトレースと録画、ストレージ、ネットワークルーティング、テストアサーションなどの追加ツール群を --caps で有効化できます。
• 細かな設定：すべての CLI フラグに対応する PLAYWRIGHT_MCP_* 環境変数があり、--config で JSON 設定ファイルも読み込めます。
• ネットワーク制御：プロキシ設定、--allowed-origins と --blocked-origins のリスト、HTTP サーバー用の --allowed-hosts。

Playwright MCP Server のツール

デフォルトのツールセットはコアな自動化をカバーします：

• ナビゲーションとページ：browser_navigate、browser_navigate_back、browser_resize、browser_close、タブの一覧・作成・クローズ・切り替えを行う browser_tabs。
• ページの読み取り：browser_snapshot はエージェントが要素を特定するためのアクセシビリティスナップショットを取得します。browser_find はスナップショット内をテキストや正規表現で検索し、完全なスナップショットより低コストです。browser_take_screenshot は画像を保存しますが、操作対象の選択には使えません。
• 操作：browser_click、browser_type、browser_fill_form、browser_select_option、browser_hover、browser_drag、browser_press_key、browser_file_upload、browser_drop、browser_handle_dialog。
• デバッグ：browser_console_messages、browser_network_requests、ヘッダーと本文を確認する browser_network_request、JavaScript を実行する browser_evaluate、テキストや時間を待つ browser_wait_for。
• コード実行：browser_run_code_unsafe はサーバープロセス内で Playwright のコードスニペットを実行します。README では RCE（リモートコード実行）相当と明記されています。

オプトインのツール群では browser_pdf_save（--caps=pdf）、browser_mouse_click_xy（--caps=vision）、browser_start_tracing（--caps=devtools）、browser_cookie_list（--caps=storage）、browser_route（--caps=network）、browser_verify_text_visible（--caps=testing）などが追加されます。

Playwright MCP Server のユースケース

• 探索的テスト：「localhost:3000 を開いてテストアカウントでサインアップし、どのステップで失敗するか教えて。」
• E2E テストの作成：エージェントにフローを一通り操作させ、Playwright のコードを生成します（--codegen で TypeScript、Python、Java、C# を指定）。
• 自己修復テスト：エージェントに現在のページ構造を調べさせ、失敗したテストの壊れたセレクターを修正します。
• フロントエンドのデバッグ：「チェックアウトページを読み込み、コンソールエラーと失敗したネットワークリクエストを一覧にして。」
• フォーム入力とデータ登録：API のない Web アプリで、永続プロファイルや拡張機能で接続したログイン済みセッションを使って作業します。
• 長時間実行のエージェントワークフロー：多数のステップにわたってブラウザの状態を保つ必要がある処理。

Playwright MCP Server と代替ツールの比較

• Playwright CLI + Skills：Microsoft の README は、CLI 呼び出しの方がトークン効率が高いため、コーディングエージェントには Playwright CLI を推奨しています。MCP サーバーは、永続的な状態と豊富なページ解析が役立つエージェントループに向いています。
• Puppeteer MCP Server：Puppeteer ベースのブラウザサーバーです。Playwright MCP は複数ブラウザ対応とアクセシビリティスナップショットによる要素指定を備えています。
• Browser Tools MCP：ブラウザをエンドツーエンドで操作するのではなく、拡張機能を通じて自分の Chrome のログや監査結果を読み取ることに特化しています。

Playwright MCP Server のトラブルシューティング

• IDE からヘッド付きブラウザが開かない：ディスプレイのないシステムや、IDE がワーカープロセスでサーバーを実行する場合は、ディスプレイのある環境で --port 8931 を付けて自分でサーバーを起動し、url で接続します。
• 複数クライアントの同時実行で競合する：永続プロファイルは同時に 1 つのブラウザインスタンスしか使えません。追加のクライアントは --isolated か別の --user-data-dir で起動します。
• 期待するツールが表示されない：PDF、vision、DevTools、ストレージ、ネットワーク、テストのツールはデフォルトで無効です。--caps=pdf のように --caps で有効化します。
• ローカルファイルや file:// URL を読めない：ファイルアクセスはデフォルトでワークスペースのルートに制限されています。--allow-unrestricted-file-access で解除できますが、慎重に使ってください。
• Docker でヘッド付きブラウザが動かない：Docker イメージはヘッドレス Chromium のみ対応です。