用途:为涉及前端组件、页面或样式的 GitHub PR 捕获、脱敏、标注并嵌入截图,常用于生成前后对比和丰富 PR 描述。仅后端、测试等非视觉改动应跳过。
主要能力:基于 Playwright 做浏览器自动化截图,用 pre-script 处理弹窗、登录、滚动、展开等交互;自动遮蔽密码字段和页面中的令牌/密钥;用 sharp 添加标签、边框和拼接对比图;用 validate-sensitive.ts 检查 API key、Token、PEM 私钥等敏感数据;可将图片上传到 Bunny Edge Storage 或通过 GitHub 拖拽获得永久 URL,再用 gh pr edit 更新 PR 正文。
使用方式:需先在项目中安装开发依赖:npm add -D playwright、npm add -D sharp、npm add -D tsx,并执行 npx playwright install chromium。工作流为:从 PR diff 识别受影响页面、浏览探索目标页面、编写 pre-script、运行 npx tsx scripts/capture.ts(支持 --base-url、--routes、--pre-script、--output-dir、--viewport、--connect、--mask-selectors、--wait、--full-page、--auth-cookie 等参数)、验证截图、迭代、运行 npx tsx scripts/validate-sensitive.ts --dir ./screengrabs 校验敏感数据、用 npx tsx scripts/annotate.ts 标注,最后上传并嵌入 PR。
适用场景:本地开发或预览部署中的前端页面视觉验证,需登录态或折叠内容的页面截图,前后对比图生成。
限制:依赖 npm 包和 Chromium 二进制;敏感数据校验失败时需重新遮蔽或修复源;同一路由最多迭代 3 次;上传到 Bunny 需相关环境变量,否则回退 GitHub 拖拽。具体安装与命令以资料为准。