Skip to main content
Glama
enesjakozh
korwabs

Playwright MCP

by korwabs
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

劇作家レコードMCP

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

主な特徴

  • 高速かつ軽量: ピクセルベースの入力ではなく、Playwright のアクセシビリティ ツリーを使用します。

  • LLM 対応: ビジョン モデルは必要なく、純粋に構造化データ上で動作します。

  • 決定論的なツールの適用: スクリーンショットベースのアプローチでよくある曖昧さを回避します。

  • ビデオ録画: ブラウザの操作をビデオとして録画する機能。

Related MCP server: Playwright MCP Server

ユースケース

  • ウェブナビゲーションとフォーム入力

  • 構造化コンテンツからのデータ抽出

  • 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

How are these scores calculated?

Resources

Appeared in Searches

Latest Blog Posts

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/korwabs/playwright-record-mcp'

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