Playwright MCP サーバー

劇作家MCP

Playwrightを用いたブラウザ自動化機能を提供するモデルコンテキストプロトコル（MCP）サーバー。このサーバーにより、LLMは構造化されたアクセシビリティスナップショットを通じてWebページと対話することができ、スクリーンショットや視覚的に調整されたモデルを必要としません。

主な特徴

高速かつ軽量: ピクセルベースの入力ではなく、Playwright のアクセシビリティツリーを使用します。
LLM 対応: ビジョンモデルは必要なく、純粋に構造化データ上で動作します。
決定論的なツールの適用: スクリーンショットベースのアプローチでよくある曖昧さを回避します。

ユースケース

ウェブナビゲーションとフォーム入力
構造化コンテンツからのデータ抽出
LLM主導の自動テスト
エージェント向け汎用ブラウザインタラクション

設定例

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

VS Codeでのインストール

VS Code CLI を使用して Playwright MCP サーバーをインストールできます。

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

インストール後、Playwright MCP サーバーは VS Code 内の GitHub Copilot エージェントで使用できるようになります。

コマンドライン

Playwright MCP サーバーは、次のコマンドラインオプションをサポートしています。

--browser <browser> : 使用するブラウザまたはChromeチャネル。可能な値:
- chrome 、 firefox 、 webkit 、 msedge
- Chrome チャンネル: chrome-beta 、 chrome-canary 、 chrome-dev
- Edge チャネル: msedge-beta 、 msedge-canary 、 msedge-dev
- デフォルト: chrome
--caps <caps> : 有効にする機能のコンマ区切りリスト。指定可能な値: tabs、pdf、history、wait、files、install。デフォルトはallです。
--cdp-endpoint <endpoint> : 接続するCDPエンドポイント
--executable-path <path> : ブラウザ実行ファイルへのパス
--headless : ブラウザをヘッドレスモードで実行します（デフォルトではヘッドレスモードで実行されます）
--device : モバイルデバイスをエミュレートする
--user-data-dir <path> : ユーザーデータディレクトリへのパス
--port <port> : SSEトランスポートをリッスンするポート
--host <host> : サーバーをバインドするホスト。デフォルトはlocalhostです。すべてのインターフェースにバインドするには0.0.0.0を使用してください。
--vision : スクリーンショットを使用するサーバーを実行します (デフォルトでは Aria スナップショットが使用されます)
--output-dir : 出力ファイルのディレクトリ
--config <path> : 設定ファイルへのパス

ユーザープロフィール

Playwright MCPは、次の場所にある新しいプロファイルでブラウザを起動します。

- `%USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile` on Windows
- `~/Library/Caches/ms-playwright/mcp-{channel}-profile` on macOS
- `~/.cache/ms-playwright/mcp-{channel}-profile` on Linux

ログインしたすべての情報はそのプロファイルに保存されます。オフライン状態をクリアしたい場合は、セッション間でそれを削除できます。

設定ファイル

Playwright MCPサーバーはJSON設定ファイルを使用して設定できます。設定ファイルの完全な形式は次のとおりです。

{
  // Browser configuration
  browser?: {
    // Browser type to use (chromium, firefox, or webkit)
    browserName?: 'chromium' | 'firefox' | 'webkit';

    // Path to user data directory for browser profile persistence
    userDataDir?: string;

    // Browser launch options (see Playwright docs)
    // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
    launchOptions?: {
      channel?: string;        // Browser channel (e.g. 'chrome')
      headless?: boolean;      // Run in headless mode
      executablePath?: string; // Path to browser executable
      // ... other Playwright launch options
    };

    // Browser context options
    // @see https://playwright.dev/docs/api/class-browser#browser-new-context
    contextOptions?: {
      viewport?: { width: number, height: number };
      // ... other Playwright context options
    };

    // CDP endpoint for connecting to existing browser
    cdpEndpoint?: string;

    // Remote Playwright server endpoint
    remoteEndpoint?: string;
  },

  // Server configuration
  server?: {
    port?: number;  // Port to listen on
    host?: string;  // Host to bind to (default: localhost)
  },

  // List of enabled capabilities
  capabilities?: Array<
    'core' |    // Core browser automation
    'tabs' |    // Tab management
    'pdf' |     // PDF generation
    'history' | // Browser history
    'wait' |    // Wait utilities
    'files' |   // File handling
    'install' | // Browser installation
    'testing'   // Testing
  >;

  // Enable vision mode (screenshots instead of accessibility snapshots)
  vision?: boolean;

  // Directory for output files
  outputDir?: string;

  // Tool-specific configurations
  tools?: {
    browser_take_screenshot?: {
      // Disable base64-encoded image responses
      omitBase64?: boolean;
    }
  }
}

--configコマンドラインオプションを使用して構成ファイルを指定できます。

npx @playwright/mcp@latest --config path/to/config.json

Linux上で実行

ディスプレイのないシステム上または IDE のワーカープロセスからヘッダー付きブラウザーを実行する場合は、DISPLAY を指定した環境から MCP サーバーを実行し、 --portフラグを渡して SSE トランスポートを有効にします。

npx @playwright/mcp@latest --port 8931

次に、MCP クライアント構成で、SSE エンドポイントへのurlを設定します。

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

ドッカー

**注意:**現時点では、Docker 実装ではヘッドレス Chromium のみがサポートされています。

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "--init", "mcp/playwright"]
    }
  }
}

Docker イメージを自分でビルドできます。

docker build -t mcp/playwright .

プログラムによる使用

import http from 'http';

import { createServer } from '@playwright/mcp';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';

http.createServer(async (req, res) => {
  // ...

  // Creates a headless Playwright MCP server with SSE transport
  const mcpServer = await createServer({ headless: true });
  const transport = new SSEServerTransport('/messages', res);
  await mcpServer.connect(transport);

  // ...
});

ツールモード

ツールは次の 2 つのモードで使用できます。

スナップショットモード（デフォルト）：アクセシビリティスナップショットを使用してパフォーマンスと信頼性を向上します
ビジョンモード: スクリーンショットを使用して視覚的なインタラクションを行います

ビジョンモードを使用するには、サーバーの起動時に--visionフラグを追加します。

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

ビジョンモードは、提供されたスクリーンショットに基づいて、XY 座標空間を使用して要素と対話できるコンピューター使用モデルで最も効果的に機能します。

スナップショットベースのインタラクション

ブラウザのスナップショット
- 説明: 現在のページのアクセシビリティスナップショットをキャプチャします。これはスクリーンショットよりも優れています。
- パラメータ: なし
ブラウザクリック
- 説明: Webページでクリックを実行する
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - ref (文字列): ページスナップショットからの正確なターゲット要素参照
ブラウザドラッグ
- 説明: 2つの要素間でドラッグアンドドロップを実行します
- パラメータ:
  - startElement (文字列): 要素と対話するための許可を取得するために使用される、人間が読めるソース要素の説明
  - startRef (文字列): ページスナップショットからの正確なソース要素参照
  - endElement (文字列): 要素と対話するための許可を取得するために使用される、人間が読めるターゲット要素の説明
  - endRef (文字列): ページスナップショットからの正確なターゲット要素参照
ブラウザホバー
- 説明: ページ上の要素にマウスを移動します
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - ref (文字列): ページスナップショットからの正確なターゲット要素参照
ブラウザの種類
- 説明: 編集可能な要素にテキストを入力します
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - ref (文字列): ページスナップショットからの正確なターゲット要素参照
  - text (文字列): 要素に入力するテキスト
  - submit （ブール値、オプション）：入力したテキストを送信するかどうか（送信後にEnterキーを押す）
  - slowly (boolean, オプション): 一度に1文字ずつ入力するかどうか。ページ内のキーハンドラをトリガーするのに便利です。デフォルトでは、テキスト全体が一度に入力されます。
ブラウザ選択オプション
- 説明: ドロップダウンからオプションを選択します
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - ref (文字列): ページスナップショットからの正確なターゲット要素参照
  - values (配列): ドロップダウンで選択する値の配列。単一の値または複数の値を指定できます。
ブラウザのスクリーンショット
- 説明: 現在のページのスクリーンショットを撮ります。スクリーンショットに基づいてアクションを実行することはできません。アクションには browser_snapshot を使用してください。
- パラメータ:
  - raw (ブール値、オプション): 圧縮せずにPNG形式で返すかどうか。デフォルトはfalseで、JPEG画像を返します。
  - element (文字列, オプション): 要素のスクリーンショットの許可を得るために使用される、人間が読める形式の要素説明。指定されていない場合は、ビューポートのスクリーンショットが撮影されます。element が指定されている場合は、ref も指定する必要があります。
  - ref (文字列, オプション): ページスナップショットから取得する正確なターゲット要素の参照。指定されていない場合は、ビューポートのスクリーンショットが取得されます。ref を指定する場合は、要素も指定する必要があります。

視覚ベースのインタラクション

ブラウザのスクリーンキャプチャ
- 説明: 現在のページのスクリーンショットを撮ります
- パラメータ: なし
ブラウザ画面上のマウス移動
- 説明: マウスを指定された位置に移動する
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - x (数値): X座標
  - y (数値): Y座標
ブラウザ画面のクリック
- 説明: マウスの左ボタンをクリック
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - x (数値): X座標
  - y (数値): Y座標
ブラウザ画面ドラッグ
- 説明: 左マウスボタンをドラッグ
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - startX (数値): 開始X座標
  - startY (数値): 開始Y座標
  - endX (数値): 終了X座標
  - endY (数値): 終了Y座標
ブラウザ画面タイプ
- 説明: テキストを入力
- パラメータ:
  - text (文字列): 要素に入力するテキスト
  - submit （ブール値、オプション）：入力したテキストを送信するかどうか（送信後にEnterキーを押す）

タブ管理

ブラウザタブリスト
- 説明: ブラウザのタブを一覧表示する
- パラメータ: なし
ブラウザタブ新規
- 説明: 新しいタブを開く
- パラメータ:
  - url (文字列、オプション): 新しいタブで移動するURL。指定しない場合、新しいタブは空白になります。
ブラウザタブ選択
- 説明: インデックスでタブを選択する
- パラメータ:
  - index （数値）：選択するタブのインデックス
ブラウザタブを閉じる
- 説明: タブを閉じる
- パラメータ:
  - index (数値, オプション): 閉じるタブのインデックス。指定されていない場合は現在のタブを閉じます。

キーボード

ブラウザのキーを押す
- 説明: キーボードのキーを押します
- パラメータ:
  - key (文字列): 押すキーの名前、または生成するa （例： ArrowLeft 、

コンソール

ブラウザコンソールメッセージ
- 説明: すべてのコンソールメッセージを返します
- パラメータ: なし

ファイルとメディア

ブラウザファイルアップロード
- 説明: 1つまたは複数のファイルをアップロードします
- パラメータ:
  - paths (配列): アップロードするファイルへの絶対パス。1つのファイルでも複数のファイルでも構いません。
ブラウザPDF保存
- 説明: ページをPDFとして保存
- パラメータ: なし

ユーティリティ

ブラウザを閉じる
- 説明: ページを閉じる
- パラメータ: なし
ブラウザ待機
- 説明: 指定された時間（秒）待機します
- パラメータ:
  - time （数値）：待機時間（秒）
ブラウザのサイズ変更
- 説明: ブラウザウィンドウのサイズを変更する
- パラメータ:
  - width （数値）：ブラウザウィンドウの幅
  - height （数値）：ブラウザウィンドウの高さ
ブラウザのインストール
- 説明: 設定で指定されたブラウザをインストールします。ブラウザがインストールされていないというエラーが発生した場合にこれを呼び出します。
- パラメータ: なし
ブラウザハンドルダイアログ
- 説明: ダイアログを処理する
- パラメータ:
  - accept (boolean): ダイアログを受け入れるかどうか。
  - promptText (文字列、オプション): プロンプトダイアログの場合のプロンプトのテキスト。

テスト

ブラウザ生成プレイライトテスト
- 説明: 指定されたシナリオの Playwright テストを生成します
- パラメータ:
  - name (文字列): テストの名前
  - description (文字列): テストの説明
  - steps （配列）：テストのステップ

Playwright MCP Server

Integrations