Communitygithub.com

ProofShot — 视觉验证工作流

在真实浏览器中对自己完成的UI功能进行可视化验证,包含视频录制和错误捕获,验证完成后打包证据供人工审阅。

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

ProofShot 是一个开源、与具体AI代理无关的命令行工具,专门用于在真实浏览器中验证UI变更,并产出视频、截图和错误报告等证据。它适用于任何影响用户可见内容的修改——无论是新建UI组件、修改现有页面,还是修复视觉错误。工作流分为三个核心步骤:启动会话(开启浏览器并开始录制,自动管理开发服务器)、驱动浏览器进行交互和截图(利用`proofshot exec`执行导航、点击、填写表单等操作并在关键时刻截图)、停止会话并打包证据(生成包含视频、截图和错误报告的SUMMARY.md)。还支持将证据直接上传并评论至对应的GitHub PR。其核心价值在于提供可追溯的、自给自足的视觉验证证据,避免了对特定平台的锁定。

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

在你喜欢的 AI 中提问

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

文档

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

ProofShot 是一个开源、与具体AI代理无关的命令行工具,让您能够在真实浏览器中验证自己的工作——提供视频证据、截图和错误报告,无供应商锁定。

何时使用

在以下情况后使用 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.

相关技能