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将证明直接附加到拉取请求中