SuperAPI AI 工具集

pr-screenshots

测试与质量

查看项目

更新于 10-17 14:48

技能介绍

PR Screenshots 是一项把截图当作 PR 质量保证证据的实践技能,核心目标是让从未打开过相关页面的审阅者也能看懂改了什么。

用途:为代码改动提供可核对的界面证据,覆盖 Diff 触及的每个页面、抽屉、弹窗或组件,以及加载、错误、空状态、悬停、选中、菜单展开、窄视口、明暗主题等受影响状态。

主要能力与流程:

  1. 列出位置:追溯组件的调用方与使用方,逐一列出所有受影响界面与状态,不把多个界面合并成一行。
  2. 真实产品截图:改动后在 PR 分支运行的应用,改动前在基线分支运行的应用;不截为 PR 专门造的故事页或模拟页,不注入 CSS 或改 DOM 伪造变化(可桩接 API 响应),缺数据时先在本地造数据。前后两张取同一区域、同尺寸。
  3. 脱敏与审查:只遮挡邮箱、用户名、客户或组织名与 slug、ID、内部主机名等隐私值;先涂盖再模糊,不用纯黑块,不模糊整表整行;上传前逐张检查令牌、认证头、Cookie、签名 URL、密钥、Webhook 端点等凭据。
  4. 选择表格形态:既有 UI 的视觉变化用 Changed 表并附 Unchanged 表;新页面或新功能只用若干“改动后”截图;无“改动前”的替代方案用 Treatment 表;随主题变化的位置按明暗各一行。每对前后截图做像素比对,无可见差异的移入 Unchanged。
  5. 用 gh 上传:gh pr create、gh pr edit、gh pr comment 及对应 gh issue 命令支持 --attach '<路径>#<替代文本>'(gh 2.99.0+)。正文用相对 Markdown 图片引用,再把同样路径传给 --attach,gh 会改写为上传后的 URL。不推资源分支、不提交图片、不用浏览器评论框上传。
  6. 保持更新:后续提交改变截图内容时,重拍受影响的前后截图对,重新判断该归入 Changed 还是 Unchanged,并更新正文。

格式规则:首列命名为 Location(替代方案用 Treatment);位置写成点击路径的面包屑加逗号加状态;只用规定列,不加“改了什么”或备注列;每张图配指明行与前后侧的替代文本;表格用粗体 Changed 和 Unchanged 标注;默认用 Markdown 表,仅需跨行合并时改用 HTML 表;不加对齐属性。

适用场景:前端界面改动的代码评审,需要直观展示视觉效果与状态差异时。

限制:依赖真实运行的 Sentry 应用环境与本地造数据能力;--attach 需 gh 2.99.0 及以上;HTML 表内的图片引用不会被 gh 自动改写,需先附加再手工替换 URL;从正文删除图片不会删除已上传文件。