Playwright MCP サーバー

劇作家MCP

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

主な特徴

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

要件

Node.js 18以降
VS Code、Cursor、Windsurf、Claude Desktop、その他のMCPクライアント

はじめる

まず、クライアントにPlaywright MCPサーバーをインストールします。典型的な構成は以下のとおりです。

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

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 エージェントで使用できるようになります。

Cursor Settings -> MCP -> Add new MCP Serverに進みます。お好みの名前を入力し、 commandタイプを使用してnpx @playwright/mcpコマンドを実行します。 Editをクリックして設定を確認したり、コマンドのような引数を追加したりすることもできます。

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

Windsuff MCPドキュメントに従ってください。以下の設定を使用してください。

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

MCP インストールガイドに従って、次の構成を使用します。

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

構成

Playwright MCPサーバーは以下の引数をサポートしています。これらは上記のJSON設定の"args"リストの一部として指定できます。

> npx @playwright/mcp@latest --help
  --allowed-origins <origins>  semicolon-separated list of origins to allow the
                               browser to request. Default is to allow all.
  --blocked-origins <origins>  semicolon-separated list of origins to block the
                               browser from requesting. Blocklist is evaluated
                               before allowlist. If used without the allowlist,
                               requests not matching the blocklist are still
                               allowed.
  --block-service-workers      block service workers
  --browser <browser>          browser or chrome channel to use, possible
                               values: chrome, firefox, webkit, msedge.
  --caps <caps>                comma-separated list of capabilities to enable,
                               possible values: tabs, pdf, history, wait, files,
                               install. Default is all.
  --cdp-endpoint <endpoint>    CDP endpoint to connect to.
  --config <path>              path to the configuration file.
  --device <device>            device to emulate, for example: "iPhone 15"
  --executable-path <path>     path to the browser executable.
  --headless                   run browser in headless mode, headed by default
  --host <host>                host to bind server to. Default is localhost. Use
                               0.0.0.0 to bind to all interfaces.
  --ignore-https-errors        ignore https errors
  --isolated                   keep the browser profile in memory, do not save
                               it to disk.
  --no-image-responses         do not send image responses to the client.
  --no-sandbox                 disable the sandbox for all process types that
                               are normally sandboxed.
  --output-dir <path>          path to the directory for output files.
  --port <port>                port to listen on for SSE transport.
  --proxy-bypass <bypass>      comma-separated domains to bypass proxy, for
                               example ".com,chromium.org,.domain.com"
  --proxy-server <proxy>       specify proxy server, for example
                               "http://myproxy:3128" or "socks5://myproxy:8080"
  --save-trace                 Whether to save the Playwright Trace of the
                               session into the output directory.
  --storage-state <path>       path to the storage state file for isolated
                               sessions.
  --user-agent <ua string>     specify user agent string
  --user-data-dir <path>       path to the user data directory. If not
                               specified, a temporary directory will be created.
  --viewport-size <size>       specify browser viewport size in pixels, for
                               example "1280, 720"
  --vision                     Run server that uses screenshots (Aria snapshots
                               are used by default)

ユーザープロフィール

Playwright MCP は、通常のブラウザ (デフォルト) のように永続プロファイルを使用して実行することも、テストセッション用の分離されたコンテキストで実行することもできます。

永続的なプロファイル

ログイン情報はすべて永続プロファイルに保存されます。オフライン状態をクリアしたい場合は、セッション間でこのプロファイルを削除できます。永続プロファイルは以下の場所に保存されており、 --user-data-dir引数で上書きできます。

# Windows
%USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile

# macOS
- ~/Library/Caches/ms-playwright/mcp-{channel}-profile

# Linux
- ~/.cache/ms-playwright/mcp-{channel}-profile

孤立した

分離モードでは、各セッションは分離プロファイルで開始されます。MCPにブラウザを閉じるよう指示するたびにセッションが閉じられ、そのセッションのすべてのストレージ状態が失われます。設定のcontextOptionsまたは--storage-state引数を使用して、ブラウザに初期のストレージ状態を提供できます。ストレージ状態の詳細については、こちらをご覧ください。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--storage-state={path/to/storage.json}
      ]
    }
  }
}

設定ファイル

Playwright MCPサーバーはJSON設定ファイルを使用して設定できます。設定ファイルは、 --configコマンドラインオプションを使用して指定できます。

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

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

    // Keep the browser profile in memory, do not save it to disk.
    isolated?: boolean;

    // 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;

  // Network configuration
  network?: {
    // List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
    allowedOrigins?: string[];

    // List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
    blockedOrigins?: string[];
  };
 
  /**
   * Do not send image responses to the client.
   */
  noImageResponses?: boolean;
}

スタンドアロンMCPサーバー

ディスプレイのないシステム上または 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", "--pull=always", "mcr.microsoft.com/playwright/mcp"]
    }
  }
}

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

docker build -t mcr.microsoft.com/playwright/mcp .

import http from 'http';

import { createConnection } 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 connection = await createConnection({ browser: { launchOptions: { headless: true } } });
  const transport = new SSEServerTransport('/messages', res);
  await connection.connect(transport);

  // ...
});

ツール

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

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

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

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

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

ブラウザのスナップショット
- タイトル: ページスナップショット
- 説明: 現在のページのアクセシビリティスナップショットをキャプチャします。これはスクリーンショットよりも優れています。
- パラメータ: なし
- 読み取り専用: true
ブラウザクリック
- タイトル: クリック
- 説明: Webページでクリックを実行する
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - ref (文字列): ページスナップショットからの正確なターゲット要素参照
- 読み取り専用: false
ブラウザドラッグ
- タイトル: マウスをドラッグ
- 説明: 2つの要素間でドラッグアンドドロップを実行します
- パラメータ:
  - startElement (文字列): 要素と対話するための許可を取得するために使用される、人間が読めるソース要素の説明
  - startRef (文字列): ページスナップショットからの正確なソース要素参照
  - endElement (文字列): 要素と対話するための許可を取得するために使用される、人間が読めるターゲット要素の説明
  - endRef (文字列): ページスナップショットからの正確なターゲット要素参照
- 読み取り専用: false
ブラウザホバー
- タイトル: ホバーマウス
- 説明: ページ上の要素にマウスを移動します
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - ref (文字列): ページスナップショットからの正確なターゲット要素参照
- 読み取り専用: true
ブラウザの種類
- タイトル: テキストを入力
- 説明: 編集可能な要素にテキストを入力します
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - ref (文字列): ページスナップショットからの正確なターゲット要素参照
  - text (文字列): 要素に入力するテキスト
  - submit （ブール値、オプション）：入力したテキストを送信するかどうか（送信後にEnterキーを押す）
  - slowly (boolean, オプション): 一度に1文字ずつ入力するかどうか。ページ内のキーハンドラをトリガーするのに便利です。デフォルトでは、テキスト全体が一度に入力されます。
- 読み取り専用: false
ブラウザ選択オプション
- タイトル: オプションを選択
- 説明: ドロップダウンからオプションを選択します
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - ref (文字列): ページスナップショットからの正確なターゲット要素参照
  - values (配列): ドロップダウンで選択する値の配列。単一の値または複数の値を指定できます。
- 読み取り専用: false
ブラウザのキーを押す
- タイトル: キーを押す
- 説明: キーボードのキーを押します
- パラメータ:
  - key (文字列): 押すキーの名前、または生成するa （例： ArrowLeft 、
- 読み取り専用: false
ブラウザの待機時間
- タイトル: 待つ
- 説明: テキストが表示されたり消えたりするか、指定された時間が経過するのを待ちます
- パラメータ:
  - time （数値、オプション）：待機時間（秒）
  - text （文字列、オプション）：待機するテキスト
  - textGone (文字列、オプション): 消えるのを待つテキスト
- 読み取り専用: true
ブラウザファイルアップロード
- タイトル: ファイルをアップロード
- 説明: 1つまたは複数のファイルをアップロードします
- パラメータ:
  - paths (配列): アップロードするファイルへの絶対パス。1つのファイルでも複数のファイルでも構いません。
- 読み取り専用: false
ブラウザハンドルダイアログ
- タイトル: ダイアログを処理する
- 説明: ダイアログを処理する
- パラメータ:
  - accept (boolean): ダイアログを受け入れるかどうか。
  - promptText (文字列、オプション): プロンプトダイアログの場合のプロンプトのテキスト。
- 読み取り専用: false
ブラウザナビゲート
- タイトル: URL に移動する
- 説明: URL に移動する
- パラメータ:
  - url (文字列): 移動するURL
- 読み取り専用: false
ブラウザの戻る
- タイトル: 戻る
- 説明: 前のページに戻る
- パラメータ: なし
- 読み取り専用: true
ブラウザで進む
- タイトル: 前進
- 説明: 次のページへ進む
- パラメータ: なし
- 読み取り専用: true
ブラウザのスクリーンショット
- タイトル: スクリーンショットを撮る
- 説明: 現在のページのスクリーンショットを撮ります。スクリーンショットに基づいてアクションを実行することはできません。アクションには browser_snapshot を使用してください。
- パラメータ:
  - raw (ブール値、オプション): 圧縮せずにPNG形式で返すかどうか。デフォルトはfalseで、JPEG画像を返します。
  - filename (文字列, オプション): スクリーンショットを保存するファイル名。指定されていない場合は、デフォルトでpage-{timestamp}.{png|jpeg}になります。
  - element (文字列, オプション): 要素のスクリーンショットの許可を得るために使用される、人間が読める形式の要素説明。指定されていない場合は、ビューポートのスクリーンショットが撮影されます。element を指定する場合は、ref も指定する必要があります。
  - ref (文字列, オプション): ページスナップショットから取得する正確なターゲット要素の参照。指定されていない場合は、ビューポートのスクリーンショットが取得されます。ref を指定する場合は、要素も指定する必要があります。
- 読み取り専用: true
ブラウザPDF保存
- タイトル: PDFとして保存
- 説明: ページをPDFとして保存
- パラメータ:
  - filename (文字列、オプション): PDFを保存するファイル名。指定されていない場合は、デフォルトでpage-{timestamp}.pdfになります。
- 読み取り専用: true
ブラウザネットワークリクエスト
- タイトル: ネットワークリクエストの一覧
- 説明: ページの読み込み以降のすべてのネットワークリクエストを返します
- パラメータ: なし
- 読み取り専用: true
ブラウザコンソールメッセージ
- タイトル: コンソールメッセージを取得する
- 説明: すべてのコンソールメッセージを返します
- パラメータ: なし
- 読み取り専用: true
ブラウザのインストール
- タイトル: 設定で指定されたブラウザをインストールする
- 説明: 設定で指定されたブラウザをインストールします。ブラウザがインストールされていないというエラーが発生した場合にこれを呼び出します。
- パラメータ: なし
- 読み取り専用: false
ブラウザを閉じる
- タイトル: ブラウザを閉じる
- 説明: ページを閉じる
- パラメータ: なし
- 読み取り専用: true
ブラウザのサイズ変更
- タイトル: ブラウザウィンドウのサイズを変更する
- 説明: ブラウザウィンドウのサイズを変更する
- パラメータ:
  - width （数値）：ブラウザウィンドウの幅
  - height （数値）：ブラウザウィンドウの高さ
- 読み取り専用: true
ブラウザタブリスト
- タイトル: リストタブ
- 説明: ブラウザのタブを一覧表示する
- パラメータ: なし
- 読み取り専用: true
ブラウザタブ新規
- タイトル: 新しいタブを開く
- 説明: 新しいタブを開く
- パラメータ:
  - url (文字列、オプション): 新しいタブで移動するURL。指定しない場合、新しいタブは空白になります。
- 読み取り専用: true
ブラウザタブ選択
- タイトル: タブを選択
- 説明: インデックスでタブを選択する
- パラメータ:
  - index （数値）：選択するタブのインデックス
- 読み取り専用: true
ブラウザタブを閉じる
- タイトル: タブを閉じる
- 説明: タブを閉じる
- パラメータ:
  - index (数値, オプション): 閉じるタブのインデックス。指定されていない場合は現在のタブを閉じます。
- 読み取り専用: false
ブラウザ生成プレイライトテスト
- タイトル: Playwright テストを生成する
- 説明: 指定されたシナリオの Playwright テストを生成します
- パラメータ:
  - name (文字列): テストの名前
  - description (文字列): テストの説明
  - steps （配列）：テストのステップ
- 読み取り専用: true
ブラウザのスクリーンキャプチャ
- タイトル: スクリーンショットを撮る
- 説明: 現在のページのスクリーンショットを撮ります
- パラメータ: なし
- 読み取り専用: true
ブラウザ画面上のマウス移動
- タイトル: マウスを動かす
- 説明: マウスを指定された位置に移動する
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - x (数値): X座標
  - y (数値): Y座標
- 読み取り専用: true
ブラウザ画面のクリック
- タイトル: クリック
- 説明: マウスの左ボタンをクリック
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - x (数値): X座標
  - y (数値): Y座標
- 読み取り専用: false
ブラウザ画面ドラッグ
- タイトル: マウスをドラッグ
- 説明: 左マウスボタンをドラッグ
- パラメータ:
  - element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
  - startX (数値): 開始X座標
  - startY (数値): 開始Y座標
  - endX (数値): 終了X座標
  - endY (数値): 終了Y座標
- 読み取り専用: false
ブラウザ画面タイプ
- タイトル: テキストを入力
- 説明: テキストを入力
- パラメータ:
  - text (文字列): 要素に入力するテキスト
  - submit （ブール値、オプション）：入力したテキストを送信するかどうか（送信後にEnterキーを押す）
- 読み取り専用: false
ブラウザのキーを押す
- タイトル: キーを押す
- 説明: キーボードのキーを押します
- パラメータ:
  - key (文字列): 押すキーの名前、または生成するa （例： ArrowLeft 、
- 読み取り専用: false
ブラウザの待機時間
- タイトル: 待つ
- 説明: テキストが表示されたり消えたりするか、指定された時間が経過するのを待ちます
- パラメータ:
  - time （数値、オプション）：待機時間（秒）
  - text （文字列、オプション）：待機するテキスト
  - textGone (文字列、オプション): 消えるのを待つテキスト
- 読み取り専用: true
ブラウザファイルアップロード
- タイトル: ファイルをアップロード
- 説明: 1つまたは複数のファイルをアップロードします
- パラメータ:
  - paths (配列): アップロードするファイルへの絶対パス。1つのファイルでも複数のファイルでも構いません。
- 読み取り専用: false
ブラウザハンドルダイアログ
- タイトル: ダイアログを処理する
- 説明: ダイアログを処理する
- パラメータ:
  - accept (boolean): ダイアログを受け入れるかどうか。
  - promptText (文字列、オプション): プロンプトダイアログの場合のプロンプトのテキスト。
- 読み取り専用: false

Deploy Server

HTTP connection URL

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

Tools

View all tools

ビジョンモデルやスクリーンショットを必要とせずに、構造化されたアクセシビリティスナップショットを通じて LLM が Web ページと対話できるようにするモデルコンテキストプロトコルサーバー。

Related MCP Servers

MCP Web Tools Server
surya-madhav
-
security
A
license
-
quality
A Model Context Protocol server that allows LLMs to interact with web content through standardized tools, currently supporting web scraping functionality.
Last updated -
1
MIT License
MCP URL Fetcher
nathanonn
A
security
F
license
A
quality
A Model Context Protocol server that enables LLMs to fetch and process web content in multiple formats (HTML, JSON, Markdown, text) with automatic format detection.
Last updated -
5
4
Playwright MCP Server
pvinis
A
security
A
license
A
quality
A Model Context Protocol server that enables LLMs to interact with web pages, take screenshots, generate test code, scrape web pages, and execute JavaScript in a real browser environment.
Last updated -
29
12
12
MIT License
Playwright MCP
korwabs
-
security
A
license
-
quality
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots, providing browser automation capabilities without requiring screenshots or visually-tuned models.
Last updated -
2
Apache 2.0

View all related MCP servers

Playwright MCP Server

劇作家MCP

主な特徴

要件

はじめる

構成

ユーザープロフィール

設定ファイル

スタンドアロンMCPサーバー

ツール

Tools

Related MCP Servers

MCP Web Tools Server

MCP URL Fetcher

Playwright MCP Server

Playwright MCP

Appeared in Searches

New MCP Servers

MCP directory API