Skip to main content
Glama
deenesjakoruzh

Playwright MCP Server

Official
by microsoft
npmGitHub
TypeScript
Apache 2.0
70,036
12,393
  • Linux
  • Apple
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

劇作家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 つのモードで使用できます。

  1. スナップショットモード（デフォルト）：アクセシビリティスナップショットを使用してパフォーマンスと信頼性を向上します
  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
Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
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.

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

  1. 主な特徴
    1. 要件
      1. はじめる
        1. 構成
          1. ユーザープロフィール
            1. 設定ファイル
              1. スタンドアロンMCPサーバー
                1. ツール

                  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 -
                    Python
                    MIT License
                    • Linux
                    • Apple

                  • MCP URL Fetcher

                    nathanonn
                    -
                    security
                    F
                    license
                    -
                    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 -
                    TypeScript
                    • Apple

                  • 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
                    10
                    1
                    TypeScript
                    MIT License

                  • Playwright MCP

                    markbustamante77
                    A
                    security
                    A
                    license
                    A
                    quality
                    A Model Context Protocol server that provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages through structured accessibility snapshots without requiring screenshots or vision models.
                    Last updated -
                    21
                    70,036
                    TypeScript
                    Apache 2.0
                    • Apple
                    • Linux

                  View all related MCP servers

                  Appeared in Searches

                  New MCP Servers

                  MCP directory API

                  We provide all the information about MCP servers via our MCP API.

                  curl -X GET 'https://glama.ai/api/mcp/v1/servers/microsoft/playwright-mcp'

                  If you have feedback or need assistance with the MCP directory API, please join our Discord server