Playwright MCP server を使って自然言語でブラウザを操作する¶

`microsoft/playwright-mcp` は、Playwright を使用してブラウザの自動化機能を提供する Model Context Protocol (MCP) サーバーです。このサーバーにより、大規模言語モデル (LLM) が、スクリーンショットや視覚ベースのモデルを必要とせず、構造化されたアクセシビリティスナップショットを通じてウェブページと対話できるようになります。

主な特徴は以下の通りです：

- **高速かつ軽量**: Playwright のアクセシビリティツリーを使用し、ピクセルベースの入力ではありません。
- **LLM フレンドリー**: 視覚モデルを必要とせず、純粋に構造化データで動作します。
- **決定論的なツール適用**: スクリーンショットベースのアプローチで一般的な曖昧さを回避します。

利用には Node.js 18 以降と、VS Code、Cursor、Windsurf、Claude Desktop などの MCP クライアントが必要です。
サーバーの起動は、クライアントの設定内で `npx @playwright/mcp@latest` のようなコマンドを指定して行います。
設定オプションとして、使用するブラウザ、ヘッドレスモードの有効/無効、許可/ブロックするオリジン、ユーザーデータディレクトリの指定などがコマンドライン引数や設定ファイルを通じて可能です。
また、永続的なユーザープロファイルを使用するか、セッションごとに分離されたコンテキストで実行するかを選択できます。デフォルトではアクセシビリティスナップショットを使用するモードで動作しますが、`--vision` フラグを指定することでスクリーンショットを使用するビジョンモードでも動作します。

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

bunx @playwright/mcp@latest --port 8931

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

Playwrightを使って、Googleのトップページにアクセスし、「検索」ボタンをクリックしてください。