mcpField
V
verify-ui

verify-ui

github.com/petem24测试与质量013 次安装1 周前更新
代码仓库

关于 verify-ui

verify-ui 是面向开发者和编码 Agent 的项目专属技能，用于在汇报 UI 改动完成前通过无头 Chrome 验证。它涵盖项目配置、交互检查、截图、测试和基于证据的报告。

主要功能

  1. 01查找项目配置与登录方式
  2. 02通过 agent-browser 检查无头 Chrome
  3. 03验证交互和 UI 状态
  4. 04截取并检查各视口画面
  5. 05检查控制台、请求和测试
  6. 06生成基于证据的验证报告

适用场景

  1. 01汇报 UI 改动完成前进行检查
  2. 02验证不同支持视口下的行为
  3. 03确认保存内容在重新加载后仍存在
  4. 04为拉取请求记录错误和证据

安装

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

$npx skills add https://github.com/petem24/skills --skill verify-ui

安装后在 Claude Code 中输入/verify-ui确认已加载。

详细介绍

验证 UI

在报告 UI 更改已完成之前，先使用 agent-browser 在无头 Chrome 中亲自检查。项目会决定如何启动应用、使用哪个 URL、如何登录以及运行哪些测试；这里的规则适用于所有项目。

1. 查找项目设置

阅读项目的 AGENTS.md（或 CLAUDE.md）以及其中链接的 UI 验证指南。记下：

  • 如何在当前检出中启动应用，以及要验证的 URL；
  • 要以哪个用户身份登录（pnpm auth --list 会显示用户）；
  • 项目支持的视口尺寸；
  • 覆盖你所更改区域的现有测试。

如果项目没有这些信息，请在报告中说明，并在不登录的情况下尽可能进行验证。

启动你正在处理的当前检出也是验证的一部分：在将问题判定为阻碍之前，尝试启动应用并修复本地故障。不要停止属于其他检出的服务。

2. 运行浏览器

在要验证的当前检出中使用 pnpm browser。在 DevSports 项目中，它来自 devkit，并会固定版本；其 README 介绍了主机设置和实时仪表板。缺少时，使用 pnpm browser:install 安装（在 Linux 上，如果缺少 Chrome 所需的库，请添加 --with-deps）。运行 pnpm browser --help 查看固定版本支持的命令。不要运行 agent-browser 自带的 upgrade 命令。

  • 每项任务使用一个会话。 选择唯一的 AGENT_BROWSER_SESSION（例如 <project>-<task>-<role>），并在每条命令中设置它：通过 shell 导出的变量不一定会在工具调用之间保留。只关闭你自己的会话；绝不要运行 close --all。
  • 使用 pnpm auth 登录。 开发用户是 Clerk 测试用户（地址包含 +clerk_test），使用代码 424242 登录，不需要电子邮件、密码或密钥。pnpm auth [user] --url "$APP_URL" 会通过应用自身的 Clerk 为你的会话登录；换用其他用户时再次运行即可。pnpm auth --all --save 会为测试套件保存会话。手动登录时，在登录页面输入测试地址并输入 424242。没有 pnpm auth 的项目会在 AGENTS.md 中说明自己的登录方式。
  • 使用同一个源站。 登录、浏览和运行测试都要使用同一个 URL。会话不会跨源站保留，因此不要在 localhost 上登录，却在 Tailscale URL 上验证。
  • 已保存的会话属于凭据。 绝不要打印、提交或复制它们；绝不要索要真实密码、验证码或 Cookie，也不要连接到个人浏览器配置文件。
export AGENT_BROWSER_SESSION=<project>-<task>
pnpm auth --url "$APP_URL"
pnpm browser open "$APP_URL"
pnpm browser set viewport 1440 1000
pnpm browser snapshot -i
pnpm browser click @e3            # refs come from the latest snapshot
pnpm browser wait --text "Saved"
pnpm browser screenshot output/agent-browser/<task>-1440.png
pnpm browser console
pnpm browser errors
pnpm browser network requests
pnpm browser close

3. 正确检查更改

  • 导航或发生重大更改后，重新获取快照；引用会过期。
  • 等待可见的 UI 状态（文本、选择器或 URL），不要等待网络空闲或固定时长。Convex 等后端会保持连接开启。
  • 操作你更改过的控件，而不只是查看其所在页面。检查重要状态：加载、空内容、错误、验证和键盘操作。
  • 重新加载以确认应当持久化的内容确实持久化，并检查已保存的内容，而不只是确认点击生效或出现了提示。
  • 对更改影响的每种受支持视口都截图，并逐张打开查看。无人查看的快照或截图不算视觉验证。Canvas 和图表也需要进行视觉检查和 DOM 检查。
  • 检查控制台错误、未捕获的页面错误，以及页面所需请求的失败情况。命令执行成功不代表结果正常。
  • 运行覆盖此更改的最小现有测试。使用 agent-browser 进行探索；不要添加一次性脚本或使用 Playwright CLI。
  • 清理你为检查创建的数据。

将截图、录屏和其他证据保存在被忽略的 output/agent-browser/ 目录中，并使用针对任务命名的文件。录屏（pnpm browser record start output/agent-browser/<task>.webm，然后运行 record stop）需要 ffmpeg，仅适用于很难用静态截图说明的流程。

4. 主机特殊情况

普通 macOS 和 Linux 主机无需设置。如果主机上的 Chrome 报告 No usable sandbox 且无法修复，或者 Tailscale 在用户空间运行并需要出站代理，请将 AGENT_BROWSER_ARGS、AGENT_BROWSER_PROXY 和小写代理变量放入项目的主机设置文件（参阅其指南），切勿放入已提交的配置中。

5. 报告

提供 URL、登录身份、视口尺寸、执行的操作和观察到的结果、测试命令及其结果、控制台和页面错误、证据路径，以及所有无法验证的内容。若只检查了登录页面，请明确说明：这并不能验证其后的功能。对于有可见改动的拉取请求，pr-screenshots 技能会附上图片。

评论

支持 Markdown