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