剧作家唱片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 .工具模式
这些工具有两种模式：
- 快照模式 （默认）：使用可访问性快照以获得更好的性能和可靠性
- 视觉模式：使用屏幕截图进行基于视觉的交互
要使用视觉模式，请添加 --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许可证