Communitygithub.com

ProofShot - 视觉验证工作流

UI 功能的视觉验证。适用于构建或修改任何 UI 组件、页面或视觉特征后。启动一个包含视频录制和错误捕获的验证会话,然后您驱动浏览器进行测试,最后停止并打包验证产物供人工审核。

ProofShot - 视觉验证工作流 是什么?

ProofShot 是一个开源、与代理无关的 CLI 工具,允许开发者或 AI 代理在真实浏览器中验证自己的 UI 工作——生成视频证明、截图和错误报告,无供应商锁定。它适用于任何影响用户界面的变更之后,如构建新功能、修改组件或修复视觉错误。工作流程分为三个核心步骤:启动会话(自动启动开发服务器并开始录制)、驱动浏览器进行交互和截图、停止会话并打包包含视频、控制台错误和服务器日志的验证报告。它还支持通过 `proofshot pr` 命令将截图和视频自动上传到 GitHub PR 中,并附带格式化评论。该工具支持在任何 CLI 环境中使用,与代理无关,并采用 MIT 许可证开源。

兼容平台~Claude Code~Codex CLI~Cursor✓OpenCode
npx skills add https://github.com/AmElmo/proofshot/tree/HEAD/skills/opencode

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

ProofShot - 视觉验证工作流 是做什么的?

ProofShot 是一个开源、与代理无关的 CLI 工具,可让您在真实浏览器中验证自己的工作——视频证明、截图和错误报告,无供应商锁定。

何时使用

在以下情况下使用 ProofShot:

  • 构建新的 UI 功能或页面后
  • 修改现有 UI 组件后
  • 修复视觉错误后
  • 任何影响用户所见的变更后

工作流程(始终遵循以下 3 个步骤)

步骤 1:启动会话

proofshot start --run "your-dev-command" --port PORT --description "您即将验证的内容"

这将打开浏览器并开始录制。如果端口已被占用,proofshot 会自动杀死现有进程。

始终使用 --run 让 proofshot 启动并捕获您的开发服务器输出(服务器日志会显示在验证报告中)。 仅当服务器由用户或其他进程明确启动时才省略 --run——没有它,将无法捕获服务器日志。

如果之前的会话未正常停止,请添加 --force 来覆盖它。

步骤 2:驱动浏览器并测试

使用 proofshot exec 进行导航、交互和验证:

proofshot exec snapshot -i                                    # 查看可交互元素
proofshot exec open http://localhost:PORT/page                # 导航到某个页面
proofshot exec click @e3                                      # 点击按钮
proofshot exec fill @e2 "[email protected]"                    # 填充表单字段
proofshot exec screenshot step-NAME.png                       # 捕获关键瞬间

在重要时刻拍摄截图——这些将成为视觉证明。 通过读取快照输出来验证您期望看到的内容。

步骤 3:停止并打包证明

proofshot stop

这将停止录制,收集控制台 + 服务器错误,并生成包含视频、截图和错误报告的 SUMMARY.md。

步骤 4(可选):将证明发布到 PR

proofshot pr              # 自动从当前分支检测 PR
proofshot pr 42           # 指定特定的 PR 编号

这会将截图和视频上传到 GitHub,并在 PR 上发布格式化评论。默认情况下,它使用官方的 GitHub contents API 在 proofshot-artifacts 分支上存储。如果您特别想要 GitHub 附件 URL,请使用 --upload-provider github-web-attachments。

提示

  • 始终包含有意义的 --description,以便人工审核者知道测试了什么
  • 在关键操作前后都要拍摄截图(例如,表单提交前、重定向后)
  • 如果在验证过程中发现错误,修复它们并重新运行工作流
  • 停止后使用 proofshot pr 将证明直接附加到拉取请求中

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

相关技能