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

LLM からブラウザを操作できるよう、Playwright MCP server を RooCode や Cursor へ接続する JSON の例を紹介します。MCP は、LLM のクライアントが外部ツールを呼び出すための接続規約です。Playwright MCP は、この規約に沿ってブラウザ操作の機能を提供します。

Playwright とは¶

Playwright は、Microsoft が開発したウェブ UI 自動化テストフレームワークです。複数のブラウザ（Chromium、Firefox、WebKit）に対応し、E2E テストを自動化できる点が主な特徴です。Playwright を使うと、Web アプリケーションのテスト自動化や、スクレイピングなどを効率的に行えます。

Playwright MCP server とは¶

Playwright MCP server は、Playwright のブラウザ操作を MCP クライアントから呼び出すためのサーバーです。通常は、ページ内の要素を構造化したアクセシビリティスナップショットを LLM へ渡します。スクリーンショットの解釈に頼らず操作対象を指定できるため、視覚モデルを使わずに軽量なやり取りでブラウザを操作できます。

ブラウザの種類、ヘッドレスモード、接続を許可・ブロックするオリジン、ユーザーデータディレクトリなどを、起動引数や設定ファイルで指定できます。ユーザープロファイルを保持する構成と、セッションごとにコンテキストを分離する構成も選べます。

座標を使う操作も追加できます。2026 年 10 月 16 日に確認した公式 READMEでは、--caps=visionで座標による操作を有効にします。--visionを指定する設定例を使う場合も、利用する版のオプションを確認してください。

利用時の設定¶

接続例は当時試した構成の記録で、Playwright MCP とクライアントの正確なバージョンは記録していません。例の@latestは起動する時点の版を取得する指定なので、同じ記述でも当時と同じ版には固定されません。SSE の接続例も、その構成で利用したものです。

Node.js 18 以降と、RooCode や Cursor などの MCP クライアントを用意します。次の設定では、クライアントからnpx @playwright/mcp@latestを起動します。クライアントによってファイルの場所やスキーマは異なる場合があるため、各クライアントのドキュメントを参照してください。

1
2
3
4
5
6
7
8

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

standalone での起動も可能です。次のコマンドを実行することで、Playwright MCP server を起動できます。

1

bunx @playwright/mcp@latest --port 8931

standalone で MCP server を起動した場合も、MCP クライアントから利用できます。次のように設定します。

1
2
3
4
5
6
7

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

Playwright MCP server の利用¶

事前設定が完了したら、自然言語で指示を入力することでブラウザを操作できます。 例えば、次のようなプロンプトを入力すると、特定のウェブサイトにアクセスし、特定の要素をクリックできます。

1

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

一通り自然言語でブラウザ操作をした後に、操作内容をコードとして出力するようプロンプトで指示すると、それらしいコードが得られます。 定型業務や特定の操作を自動化したい場合に、いきなりコードを書くのではなく、自然言語の指示から始めることで負担を軽減できます。

参考リンク¶

• Playwright MCP server GitHub