AI导哈

浏览器UI捕获与分析工具

一个轻量级的MCP服务器，用于使用Playwright进行带界面的浏览器UI捕获和分析，支持截图、视频录制和浏览器自动化。

  • by ailabs-393
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 ailabs-393/playwright-mcp-ui-test

使用说明

剧作家ui mcp

一个轻量级的MCP（模型上下文协议）服务器，用于使用Playwright进行浏览器UI捕获和分析。专为与Claude配合使用而设计，可实现可视化UI检查、屏幕截图和浏览器自动化。

特性

  • 头部浏览器 -始终可见，而非无头，用于真正的UI分析
  • 默认情况下为轻量级 -除非明确启用，否则无法录制视频
  • 屏幕截图 -返回base64图像供Claude分析
  • 视频记录 -可选，仅在需要时启用
  • 自动清理 -浏览器关闭时删除所有截图/视频
  • 交互元素 -使用选择器获取可点击元素

安装

自动安装（推荐）

在项目中作为依赖项安装。配置(.mcp.json)是自动创建的。

npm install playwright-ui-mcp

快速安装（无需安装）

如果您只想配置当前目录而不添加依赖关系：

npx playwright-ui-mcp-install

手动配置

创建 .mcp.json 在项目根目录中：

{
  "mcpServers": {
    "playwright-ui": {
      "command": "npx",
      "args": ["-y", "playwright-ui-mcp"]
    }
  }
}

然后重新启动Claude Code或运行 /mcp 加载服务器。

可用工具

工具 说明
browser_launch 启动头部浏览器。选项： width, height, slowMo, recordVideo
browser_new_page 创建新选项卡
browser_navigate 导航到URL
browser_screenshot 截图（返回base64图像进行分析）
browser_get_visible_elements 使用选择器获取交互式元素
browser_get_content 获取页面HTML和文本
browser_click 单击元素
browser_type 在输入框中键入
browser_wait_for 等待元素出现
browser_evaluate 在页面中运行JavaScript
browser_close_page 关闭特定选项卡
browser_close 关闭浏览器并清除所有捕获
browser_status 获取会话信息

使用示例

基本UI检查

问克劳德：

“打开浏览器，转到https://example.com，并描述你所看到的”

克劳德将：

  1. 启动浏览器
  2. 导航到URL
  3. 截图
  4. 直观地分析UI
  5. 关闭浏览器（自动清理）

表单交互

“转到登录页面，填写用户名”test@example.com'和密码'secret'，然后单击提交“

带视频录制（重模式）

“在结账流程中导航时录制视频”

克劳德将使用 recordVideo: true 发射时。

轻量化与重量化模式

模式 视频 slowMo 用例
默认值（灯光） 关闭 无 快速UI检查
重的 关于 100-200ms 调试、演示 
// Lightweight (default)
browser_launch()

// Heavy mode for debugging
browser_launch({ recordVideo: true, slowMo: 150 })

清理

所有临时文件（截图、视频） 自动删除 当 browser_close 被称为。无需手动清理。

卸载

从项目中删除：

npx playwright-ui-mcp-install uninstall

需求

  • Node.js>=18.0.0
  • Chromium浏览器（首次运行时通过Playwright自动安装）

许可证

麻省理工学院

相关 MCP