Skip to main content
Glama
Sign In
enesjakozh

Playwright MCP

by korwabs
GitHub
TypeScript
Apache 2.0
  • Apple
  • Linux
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Integrations

  • Enables running the MCP server in a containerized environment, supporting headless Chromium for browser automation tasks.

  • Provides browser automation capabilities using Firefox, allowing interactions with web pages through accessibility snapshots or screenshots.

  • Integrates with GitHub Copilot agent in VS Code, enabling browser automation and recording capabilities for AI-assisted web interactions.

劇作家レコードMCP

Playwright Record MCPは、 Playwrightを用いたブラウザ自動化機能を提供するモデルコンテキストプロトコル（MCP）サーバーです。このサーバーは、ブラウザインタラクションを記録するためのビデオ録画機能を追加します。これにより、LLM（大規模言語モデル）は、スクリーンショットや視覚モデルを必要とせずに、構造化されたアクセシビリティスナップショットを通じてウェブページと対話できるようになります。

主な特徴

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

ユースケース

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

インストール

NPM経由のインストール

npm install @playwright/record-mcp

または

npx @playwright/record-mcp

設定例

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

VS Codeでのインストール

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

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

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

CLIオプション

Playwright Record 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 : ブラウザをヘッドレスモードで実行します（デフォルトではヘッドレスモードで実行されます）
  • --port <port> : SSEトランスポートをリッスンするポート
  • --user-data-dir <path> : ユーザーデータディレクトリへのパス
  • --vision : スクリーンショットを使用するサーバーを実行します (デフォルトでは Aria スナップショットが使用されます)
  • --record : ブラウザの操作をビデオとして記録する (新機能)
  • --record-path <path> : 録画ファイルを保存するパス (デフォルト: ./recordings)
  • --record-format <format> : 録画形式、可能な値: mp4、webm (デフォルト: mp4)

ユーザーデータディレクトリ

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

  • Windows: %USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
  • macOS: ~/Library/Caches/ms-playwright/mcp-chrome-profile
  • Linux: ~/.cache/ms-playwright/mcp-chrome-profile

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

ヘッドレスブラウザ（GUIのないブラウザ）の実行

このモードは、バックグラウンドまたはバッチ操作に役立ちます。

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

ビデオ録画の使用

ビデオ録画機能を使用するには、 --recordフラグを使用します。

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

録音ファイルの保存パスを指定するには:

{ "mcpServers": { "playwright": { "command": "npx", "args": [ "@playwright/record-mcp@latest", "--record", "--record-path", "./my-recordings" ] } } }

録音形式を指定するには:

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

Linux で DISPLAY なしでブラウザを起動する

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

npx @playwright/record-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-record"] } } }

Docker でビルドするには:

docker build -t mcp/playwright-record .

ツールモード

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

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

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

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

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

カスタムトランスポートによるプログラム的使用

import http from 'http'; import { createServer } from '@playwright/record-mcp'; import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js'; http.createServer(async (req, res) => { // ... // Creates a headless Playwright Record MCP server with SSE transport const mcpServer = await createServer({ headless: true, record: true }); const transport = new SSEServerTransport('/messages', res); await mcpServer.connect(transport); // ... });

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

  • ブラウザのスナップショット
    • 説明: 現在のページのアクセシビリティスナップショットをキャプチャします。これはスクリーンショットよりも優れています。
    • パラメータ: なし
  • ブラウザクリック
    • 説明: Webページでクリックを実行する
    • パラメータ:
      • element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
      • ref (文字列): ページスナップショットからの正確なターゲット要素参照
  • ブラウザドラッグ
    • 説明: 2つの要素間でドラッグアンドドロップを実行します
    • パラメータ:
      • startElement (文字列): 要素と対話するための許可を取得するために使用される、人間が読めるソース要素の説明
      • startRef (文字列): ページスナップショットからの正確なソース要素参照
      • endElement (文字列): 要素と対話するための許可を取得するために使用される、人間が読めるターゲット要素の説明
      • endRef (文字列): ページスナップショットからの正確なターゲット要素参照
  • ブラウザホバー
    • 説明: ページ上の要素にマウスを移動します
    • パラメータ:
      • element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
      • ref (文字列): ページスナップショットからの正確なターゲット要素参照
  • ブラウザの種類
    • 説明: 編集可能な要素にテキストを入力します
    • パラメータ:
      • element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明
      • ref (文字列): ページスナップショットからの正確なターゲット要素参照
      • text (文字列): 要素に入力するテキスト
      • submit （ブール値、オプション）：入力したテキストを送信するかどうか（送信後にEnterキーを押す）
      • slowly (boolean, オプション): 一度に1文字ずつ入力するかどうか。ページ内のキーハンドラをトリガーするのに便利です。デフォルトでは、テキスト全体が一度に入力されます。

ビデオ録画ツール（新機能）

  • ブラウザ記録開始
    • 説明: ブラウザインタラクションの記録を開始する
    • パラメータ:
      • path （文字列、オプション）：録音ファイルを保存するパス
      • format (文字列、オプション): 録画形式 (mp4 または webm)
  • ブラウザ記録停止
    • 説明: ブラウザインタラクションの記録を停止して保存します
    • パラメータ: なし
  • ブラウザ記録一時停止
    • 説明: 現在の録音を一時停止します
    • パラメータ: なし
  • ブラウザ記録再開
    • 説明: 一時停止した録音を再開する
    • パラメータ: なし
  • ブラウザ記録リスト
    • 説明: 現在の録音ファイルのリストを返します
    • パラメータ: なし

例

ビデオ録画の開始と停止

// Start video recording await mcpServer.invoke('browser_record_start', { path: './my-recordings/test-recording.mp4', format: 'mp4' }); // Perform browser navigation await mcpServer.invoke('browser_navigate', { url: 'https://example.com' }); // Interact with the page const snapshot = await mcpServer.invoke('browser_snapshot'); // Find elements in the snapshot... // Stop video recording await mcpServer.invoke('browser_record_stop');

サポートされているブラウザ

  • クロム
  • ファイアフォックス
  • ウェブキット
  • マイクロソフトエッジ

要件

  • Node.js 18以上
  • 必要なブラウザがインストールされている必要があります（またはbrowser_installツールを使用してインストールしてください）

ライセンス

Apache 2.0 ライセンス

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

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

  1. Key Features
    1. Use Cases
      1. Installation
        1. Installation via NPM
        2. Configuration Example
        3. Installation in VS Code
      2. CLI Options
        1. User Data Directory
          1. Running Headless Browser (Browser without GUI)
            1. Using Video Recording
              1. Running Headed Browser on Linux without DISPLAY
                1. Docker
                  1. Tool Modes
                    1. Programmatic Usage with Custom Transports
                      1. Snapshot-based Interactions
                        1. Video Recording Tools (New Feature)
                          1. Examples
                            1. Starting and Stopping Video Recording
                          2. Supported Browsers
                            1. Requirements
                              1. License

                                Related MCP Servers

                                • Puppeteer MCP Server

                                  twolven
                                  -
                                  security
                                  A
                                  license
                                  -
                                  quality
                                  A Model Context Protocol server that provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment.
                                  Last updated -
                                  3
                                  Python
                                  Apache 2.0

                                • 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

                                • BrowserCat MCP Server (Browser Automation)

                                  browsercat
                                  -
                                  security
                                  F
                                  license
                                  -
                                  quality
                                  A Model Context Protocol server that provides browser automation capabilities using BrowserCat's cloud browser service. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment without needing to install browsers locally.
                                  Last updated -
                                  39

                                • Playwright MCP Serverofficial

                                  microsoft
                                  A
                                  security
                                  A
                                  license
                                  A
                                  quality
                                  A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
                                  Last updated -
                                  21
                                  57,026
                                  9,144
                                  TypeScript
                                  Apache 2.0
                                  • Linux
                                  • Apple

                                View all related MCP servers

                                Appeared in Searches

                                ID: pqbejrd9xc