剧作家 MCP

剧作家记录 MCP

Playwright Record MCP 是一个模型上下文协议 (MCP) 服务器，它使用Playwright提供浏览器自动化功能。该服务器添加了视频录制功能，用于记录浏览器交互。它使 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
- 边缘渠道： msedge-beta 、 msedge-canary 、 msedge-dev
- 默认值： chrome
--caps <caps> ：以逗号分隔的要启用的功能列表，可能的值包括：tabs、pdf、history、wait、files、install。默认为全部。
--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 运行 Headed 浏览器

在没有显示器的系统上或从 IDE 的工作进程运行带头浏览器时，从具有 DISPLAY 的环境运行 MCP 服务器并传递--port标志以启用 SSE 传输。

npx @playwright/record-mcp@latest --port 8931

然后，在 MCP 客户端配置中，将url设置为 SSE 端点：

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

Docker

注意： Docker 实现目前仅支持无头 Chromium。

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

使用 Docker 构建：

docker build -t mcp/playwright-record .

工具模式

该工具有两种模式：

快照模式（默认）：使用可访问性快照来获得更好的性能和可靠性
视觉模式：使用屏幕截图进行基于视觉的交互

要使用 Vision 模式，请在启动服务器时添加--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);

  // ...
});

基于快照的交互

browser_snapshot
- 描述：捕获当前页面的可访问性快照，这比屏幕截图更好
- 参数：无
browser_click
- 描述：执行网页上的点击操作
- 参数：
  - element （字符串）：用于获取与元素交互的权限的人类可读的元素描述
  - ref （字符串）：来自页面快照的精确目标元素引用
browser_drag
- 描述：在两个元素之间执行拖放操作
- 参数：
  - startElement （字符串）：用于获取与元素交互权限的人类可读的源元素描述
  - startRef （字符串）：来自页面快照的精确源元素引用
  - endElement （字符串）：用于获取与元素交互的权限的人类可读的目标元素描述
  - endRef （字符串）：来自页面快照的精确目标元素引用
browser_hover
- 描述：将鼠标悬停在页面上的元素上
- 参数：
  - element （字符串）：用于获取与元素交互的权限的人类可读的元素描述
  - ref （字符串）：来自页面快照的精确目标元素引用
浏览器类型
- 描述：在可编辑元素中输入文本
- 参数：
  - element （字符串）：用于获取与元素交互的权限的人类可读的元素描述
  - ref （字符串）：来自页面快照的精确目标元素引用
  - text （字符串）：输入到元素中的文本
  - submit （布尔值，可选）：是否提交输入的文本（按 Enter 键后）
  - slowly （布尔值，可选）：是否一次输入一个字符。用于触发页面中的按键处理程序。默认情况下，整个文本会一次性填充。

视频录制工具（新功能）

browser_record_start
- 描述：开始记录浏览器交互
- 参数：
  - path （字符串，可选）：保存录音文件的路径
  - format （字符串，可选）：录制格式（mp4 或 webm）
browser_record_stop
- 描述：停止并保存浏览器交互记录
- 参数：无
browser_record_pause
- 描述：暂停当前录音
- 参数：无
browser_record_resume
- 描述：恢复暂停的录音
- 参数：无
browser_record_list
- 描述：返回当前录音文件列表
- 参数：无

示例

开始和停止视频录制

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

支持的浏览器

铬合金
火狐
WebKit
微软 Edge

要求

Node.js 18 或更高版本
必须安装所需的浏览器（或使用browser_install工具进行安装）

执照

Apache-2.0许可证

Playwright MCP

Integrations