Playwright Record MCP

](https://mseep.ai/app/korwabs-playwright-record-mcp)

剧作家唱片MCP

Playwright Record MCP是一个模型上下文协议（MCP）服务器，它使用以下方式提供浏览器自动化功能 剧作家此服务器添加了视频录制功能来记录浏览器交互。它使LLM（大型语言模型）能够通过结构化的可访问性快照与网页交互，而不需要屏幕截图或视觉模型。

主要特点

• 快速轻便：使用Playwright的可访问性树，而不是基于像素的输入。
• LLM友好无需视觉模型，仅基于结构化数据进行操作。
• 确定性工具应用：避免了基于屏幕截图的方法中常见的歧义。
• 视频记录：能够将浏览器交互记录为视频。

用例

• Web导航和表单填写
• 从结构化内容中提取数据
• LLM驱动的自动化测试
• 代理的通用浏览器交互
• 记录和分析浏览器交互

安装

通过NPM安装

npm install @playwright/record-mcp

或

npx @playwright/record-mcp

配置示例

NPX

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

在VS代码中安装

您可以使用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

：要使用的浏览器或Chrome频道。可能值： - chrome, firefox, webkit, msedge - Chrome频道： chrome-beta, chrome-canary, chrome-dev - 边缘通道： msedge-beta, msedge-canary, msedge-dev - 违约： chrome`

• --caps ：以逗号分隔的要启用的功能列表，可能的值：选项卡、pdf、历史记录、等待、文件、安装。默认值为全部。
• --cdp-endpoint ：要连接的CDP终结点
• `--executable-path

`：浏览器可执行文件的路径

• --headless：在无头模式下运行浏览器（默认情况下为无头模式）
• `--port

`：监听SSE运输的港口

• `--user-data-dir

`：用户数据目录的路径

• --vision：运行使用屏幕截图的服务器（默认情况下使用Aria快照）
• --record：将浏览器交互记录为视频（新功能）
• `--record-path

`：保存录制文件的路径（默认路径：./recordings）

• --record-format ：录制格式，可能值：mp4、webm（默认值：mp3）

用户数据目录

Playwright Record MCP将启动带有新配置文件的浏览器，该配置文件位于：

• 窗户： %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上运行Headed Browser而不使用DISPLAY

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

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

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

{
  "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 .

工具模式

这些工具有两种模式：

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

要使用视觉模式，请添加 --vision 启动服务器时标记：

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

视觉模式最适用于能够根据提供的屏幕截图使用X-Y坐标空间与元素交互的计算机使用模型。

自定义传输的程序化使用

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

  // ...
});

基于快照的交互

• 浏览器快照

- 描述：捕获当前页面的可访问性快照，这比截图更好 - 参数：无

• 浏览器点击

- 说明：在网页上执行点击操作 - 参数： - element （string）：人类可读的元素描述，用于获得与元素交互的权限 - ref （string）：页面快照中的精确目标元素引用

• browser_drag

- 说明：在两个元素之间执行拖放操作 - 参数： - startElement （string）：人类可读的源元素描述，用于获得与元素交互的权限 - startRef （string）：页面快照中的精确源元素引用 - endElement （string）：人类可读的目标元素描述，用于获得与元素交互的权限 - endRef （string）：页面快照中的精确目标元素引用

• 浏览器切换

- 描述：将鼠标悬停在页面上的元素上 - 参数： - element （string）：人类可读的元素描述，用于获得与元素交互的权限 - ref （string）：页面快照中的精确目标元素引用

• 浏览器类型

- 说明：在可编辑元素中键入文本 - 参数： - element （string）：人类可读的元素描述，用于获得与元素交互的权限 - ref （string）：页面快照中的精确目标元素引用 - text （string）：要在元素中键入的文本 - submit （布尔值，可选）：是否提交输入的文本（之后按Enter键） - slowly （boolean，可选）：是否一次键入一个字符。可用于触发页面中的密钥处理程序。默认情况下，一次填写整个文本。

视频录制工具（新功能）

• 浏览器记录启动

- 说明：开始记录浏览器交互 - 参数： - 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许可证