Communitygithub.com

AmElmo/proofshot — 可视化验证

UI功能的可视化验证。在构建或修改任何UI组件、页面或视觉特性后使用。启动一个包含视频录制与错误捕获的验证会话,然后由你驱动浏览器进行测试,最后停止并打包用于人工审查的验证工件。

proofshot — 可视化验证 是什么?

ProofShot 是一个用于验证用户界面视觉变化的工具。它提供完整的工作流:启动测试环境并录制视频、让你通过命令行驱动浏览器进行交互式操作、然后停止录制并打包证据(包括截图、视频和错误报告)。其核心价值在于,它能够将 AI 驱动的 UI 变更验证过程转化为结构化、可审计的成果——SUMMARY.md 文件,其中包含视频回放和错误附录。该工具支持 GitHub PR 集成,能够自动将验证证据上传到 PR 上作为评论。ProofShot 简化了 AI 生成前端代码后的人工审查验收流程,确保每个视觉变更都附带明确的核查证据。支持 GitHub Actions 集成,并为 LLM Agent 提供清晰的提示指令。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AmElmo/proofshot/tree/HEAD/test/fixtures/sample-app/.claude/skills/proofshot

在你喜欢的 AI 中提问

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

文档

ProofShot — 可视化验证工作流

使用时机

在以下情况后使用 ProofShot:

  • 构建了新的 UI 功能或页面
  • 修改了现有的 UI 组件
  • 修复了视觉上的 bug
  • 任何影响用户界面的变更

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

步骤 1:启动会话

proofshot start --description "你要验证的内容"

这将会启动开发服务器、打开无头浏览器并开始录制。 描述信息会出现在供人工审查的验证报告中。

步骤 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 attachment 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.

相关技能