ProofShot — 视觉验证工作流
ProofShot 是一个开源、与代理无关的 CLI 工具,让你在真实浏览器中验证自己的工作——包括视频证据、截图和错误报告,且没有供应商锁定。
何时使用
在以下情况下使用 ProofShot:
- 构建新的 UI 功能或页面后
- 修改现有 UI 组件后
- 修复视觉错误后
- 任何影响用户所见的变更后
工作流(始终遵循以下 3 个步骤)
步骤 1:启动会话
proofshot start --run "你的开发命令" --port 端口号 --description "你即将验证的内容"
此命令会打开一个浏览器并开始录制。如果端口已被占用,proofshot 会自动终止现有进程。
始终使用 --run 让 proofshot 启动并捕获你的开发服务器输出(服务器日志会显示在验证报告中)。
仅在服务器已由用户或其他进程显式启动时才省略 --run——否则不会捕获服务器日志。
如果之前的会话未正常停止,请添加 --force 覆盖它。
步骤 2:驱动浏览器并进行测试
使用 proofshot exec 进行导航、交互和验证:
proofshot exec snapshot -i # 查看可交互元素
proofshot exec open http://localhost:端口号/页面 # 导航到某个页面
proofshot exec click @e3 # 点击按钮
proofshot exec fill @e2 "[email protected]" # 填写表单字段
proofshot exec screenshot step-名称.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将证据直接附加到拉取请求上