GUI自动化测试工具

反馈

一个MCP服务器，为Claude Code提供GUI开发的眼睛和手。当Claude构建web应用程序、Electron应用程序、Tauri应用程序或Windows桌面应用程序时，Feedback会启动应用程序，捕获屏幕截图，与UI交互，审核质量，并使用断言运行多步骤QA工作流程——这样Claude就可以迭代，直到GUI真正工作。

为什么

Claude Code目前无法看到它编写的GUI代码的视觉输出。这导致了盲目的迭代周期，用户必须描述出了什么问题。反馈关闭了循环：Claude编写代码，启动应用程序，截图，验证结果，并修复问题——所有这些都是自主的。

安装

npm install -g get-feedback-mcp

然后安装Playwright浏览器（web/Electron/Tauri自动化所需）：

npx playwright install chromium

使用Claude代码进行配置

添加到您的Claude Code MCP设置中(~/.claude/settings.json 或项目 .claude/settings.json):

{
  "mcpServers": {
    "feedback": {
      "command": "get-feedback-mcp",
      "args": []
    }
  }
}

或者，如果在项目中本地安装：

{
  "mcpServers": {
    "feedback": {
      "command": "npx",
      "args": ["get-feedback-mcp"]
    }
  }
}

添加配置后重新启动Claude Code。您应该看到Feedback的43个可用工具。

使用OpenCode进行配置

添加到您的 opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "feedback": {
      "type": "local",
      "command": ["get-feedback-mcp"],
      "enabled": true
    }
  }
}

或者，如果在项目中本地安装：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "feedback": {
      "type": "local",
      "command": ["npx", "get-feedback-mcp"],
      "enabled": true
    }
  }
}

它的作用

会话管理

每次交互都始于创建会话。会话跟踪所有资源（进程、浏览器、屏幕截图、日志），并在结束时清理所有内容。

启动应用程序

• Web开发服务器 --启动 npm start, vite, webpack, next dev等等。通过stdout模式匹配和TCP端口轮询自动检测服务器何时准备就绪。
• 电子应用程序 --启动并连接Playwright以实现完全自动化。
• Tauri应用程序 --通过CDP启动并连接到WebView2以实现自动化（Windows）。
• Windows.exe文件 --启动本机桌面应用程序并跟踪其进程。

拍摄屏幕截图

• Web/Electron/Tauri --基于剧作家的全屏、视口或元素级模式的屏幕截图。
• 桌面应用 --通过PID捕获本机窗口。
• 自动捕获 --在页面导航事件后自动捕获屏幕截图。
• 优化 --所有屏幕截图均已调整大小并压缩到WebP，以实现快速MCP传输。

与UI交互

• 点击元素 --按CSS选择器、文本内容、角色或测试ID返回点击后的屏幕截图。
• 键入文本 --用粘贴或每次按键输入填充输入。自动等待元素准备就绪。
• 选择下拉菜单 --按值、可见标签或数字索引。
• 按键 --键盘按键和组合（Ctrl+A、Shift+Tab、Enter、Escape）。
• 悬停 --触发菜单、工具提示和悬停状态。
• 滚动 --按像素滚动页面或元素，以定位或显示元素。
• 拖放 --将元素从源拖动到目标。
• 文件上传 --将文件上传到文件输入元素。
• 导航 --转到URL，浏览器后退/前进。自动更新页面跟踪。
• 读取状态 --获取元素文本、可见性、启用/禁用、属性、边界框。
• 等待元素 --等待元素变得可见、隐藏、附着或分离。

页面控制

• 执行JavaScript --在页面上下文中运行任意JS并接收序列化结果。
• 处理对话框 --自动接受、取消或响应警报/确认/提示对话框。
• 调整视口大小 --设置尺寸或使用设备预设（移动设备、平板电脑、台式机）。
• 等待条件 --等待网络空闲、JS表达式变为真或URL模式。
• 管理存储 --读/写Cookie、本地存储、会话存储。保存/恢复完整状态。
• 管理选项卡 --列出、切换、打开、关闭选项卡。自动弹出跟踪。
• 拦截网络 -模拟API响应，阻止请求，修改头。

质量审核

• 可访问性审计 --对违规行为、严重程度和修复建议进行斧头核心WCAG审计。
• 可访问性树 --将页面的ARIA角色/名称层次结构捕获为结构化文本。
• 屏幕截图比较 --逐像素差异与不匹配百分比和视觉差异图像。
• CSS检查 --读取任何元素的计算CSS属性值。

捕获错误和日志

• 控制台日志 --每个会话的浏览器控制台输出（日志、错误、警告）。
• 运行时错误 --未捕获的异常和页面崩溃。
• 网络流量 --带有状态代码和时间的HTTP请求/响应。
• 过程输出 --来自开发服务器和可执行文件的stdout/stderr。

MCP协议集成

• 资源 --屏幕截图、控制台日志、错误、网络日志和会话状态作为MCP资源公开 feedback:// URI（可通过以下方式访问 @ Claude Code中的语法）。
• 提示 --预构建的QA场景模板：烟雾测试、可访问性检查、响应性检查。
• 进展 --长时间运行的操作会发出进度通知，显示逐步完成。

运行QA工作流

使用每一步的屏幕截图和日志捕获执行多步序列：

run_workflow: [
  { action: "navigate", url: "http://localhost:3000" },
  { action: "click", selector: "#login-button" },
  { action: "type", selector: "#email", text: "user@example.com" },
  { action: "type", selector: "#password", text: "password123" },
  { action: "click", selector: "role=button[name='Sign In']" },
  { action: "assert", selector: ".welcome-message", assertType: "text-contains", expected: "Welcome" },
  { action: "assert", assertType: "a11y-passes" }
]

每一步都会捕获一个屏幕截图和日志增量。失败的步骤会停止具有诊断上下文的工作流。

断言UI状态

用于验证应用程序行为的19种断言类型：

全部43个工具

典型流量

create_session
  -> launch_web_server (npm run dev on port 3000)
  -> screenshot_web (http://localhost:3000)
  -> click_element (#submit-button)
  -> type_text (#search-input, "hello world")
  -> audit_accessibility (check WCAG compliance)
  -> run_workflow (multi-step test with assertions)
  -> get_console_logs (check for errors)
  -> stop_process (clean up)
  -> end_session

需求

• Node.js >= 18.0.0
• 剧作家Chromium --通过安装 npx playwright install chromium
• 视窗 --桌面应用程序截图、.exe启动和Tauri支持（所有平台上的web/Electron工作）都需要

技术栈

• 带有ESM的Types/Node.js
• MCP-SDK 用于Claude Code集成
• 剧作家 用于网络、电子和Tauri自动化
• 夏普 用于屏幕截图优化（WebP）
• 节点截图 用于本机桌面捕获
• 斧头核心 用于可访问性审计
• 像素匹配 用于屏幕截图比较

许可证

麻省理工学院