mcpField
O
openwork-docker-chrome-mcp

openwork-docker-chrome-mcp

github.com/different-ai测试与质量24.3k90 次安装今天更新
代码仓库

关于 openwork-docker-chrome-mcp

用于通过 Docker 开发环境和浏览器界面流程验证 OpenWork 变更的测试技能。它指导贡献者使用 Chrome MCP 操作页面,并收集截图或日志作为验证证据。

主要功能

  1. 01启动 Docker 开发环境
  2. 02使用 Chrome MCP 执行聊天流程
  3. 03捕获截图和控制台日志
  4. 04使用生成的命令停止环境

适用场景

  1. 01端到端验证面向用户的变更
  2. 02检查运行中界面的远程行为
  3. 03为拉取请求附上可视化证据

MCP 相关

它使用 Chrome MCP 工具打开并操作 OpenWork 网页界面、检查结果,以及捕获截图或控制台消息。

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/different-ai/openwork --skill openwork-docker-chrome-mcp

安装后在 Claude Code 中输入/openwork-docker-chrome-mcp确认已加载。

详细介绍

快速使用(已配置)

1) 启动开发环境栈(Docker)

在 OpenWork 仓库根目录运行:

packaging/docker/dev-up.sh

此命令会输出:

  • Web UI URL(http://localhost:<WEB_PORT>)
  • OpenWork 服务 URL(http://localhost:<OPENWORK_PORT>)
  • Token 文件路径(tmp/.dev-env-<id>),其中包含 OPENWORK_TOKEN + OPENWORK_HOST_TOKEN
  • 用于停止此环境栈的 docker compose ... down 命令
2) 验证真实 UI 流程(Chrome MCP)

最低要求:

  1. 打开输出的 Web UI URL。
  2. 导航至会话/聊天界面(通常为 /session)。
  3. 发送一条消息(示例:smoke: hello from chrome mcp)。
  4. 确认 UI 中显示了回复。

Chrome MCP 工具使用步骤(典型流程):

  • chrome-devtools_list_pages(可选:查看现有标签页)
  • 使用 Web UI URL 调用 chrome-devtools_new_page(如果页面已打开,则调用 chrome-devtools_navigate_page)
  • 调用 chrome-devtools_take_snapshot,找到聊天输入框和 Send 按钮的 uid
  • 调用 chrome-devtools_fill,在聊天输入框 uid 中填写消息
  • 调用 chrome-devtools_click,点击 Send 按钮 uid
  • 调用 chrome-devtools_wait_for 等待具有辨识度的回复文本(或重复截取快照,直到回复出现)
  • 调用 chrome-devtools_take_screenshot(尽可能保存到 /tmp/...png)
  • 如果需要调试:调用 chrome-devtools_list_console_messages

证据:

  • 回复出现后,使用 Chrome MCP 截图。
  • 如果出现故障,收集控制台日志和(可选)Docker 日志。
验证清单(复制到 PR 中)
  • 在仓库根目录使用 packaging/docker/dev-up.sh 启动环境栈。
  • 使用输出的 Web UI URL(不要猜测端口)。
  • 在 UI 中完成一项完整的用户流程(输入 -> 操作 -> 可见结果)。
  • 至少为成功状态截取一张屏幕截图。
  • 在相关情况下收集故障证据(控制台和/或 Docker 日志)。
  • 使用准确输出的 docker compose -p ... down 命令停止环境栈。

面向用户的更改建议截图集:

  • 操作前状态。
  • 操作中/进度状态。
  • 成功状态。
  • 故障或恢复状态(如适用)。
3) 停止环境栈

使用 dev-up.sh 输出的准确 docker compose -p ... down 命令。

如果找不到该命令,可以通过以下方式查找项目名称:

docker ps --format '{{.Names}}' | rg '^openwork-dev-'

然后停止环境栈(替换 <project>):

docker compose -p <project> -f packaging/docker/docker-compose.dev.yml down

必须通过的验证门槛(不可妥协)

  • 任何面向用户的更改,或涉及远程行为的更改,都必须在运行中的 UI 中进行端到端验证。
  • 只有通过 Chrome MCP 在由 packaging/docker/dev-up.sh 启动的 Docker 开发环境栈中验证成功,更改才算“完成”。

常见问题

  • 必须使用 Docker(并且 docker CLI 必须位于 PATH 中)。
  • dev-up.sh 使用随机主机端口;不要假定端口为 5173/8787。
  • 如果 UI 看起来已启动但处于断开状态,请确认打开的是输出的 URL,并确认 headless 状态正常。

评论

支持 Markdown