# PR截图技巧使用浏览器自动化和 GitHub CDN 将前后比较屏幕截图添加到拉取请求。这将捕获 **基本分支**（之前）和 **PR 分支**（之后）上的 UI，然后将它们呈现在并排比较表中。 ## 参数 * `$ARGUMENTS` \- PR 编号和要截图内容的可选描述（例如要捕获的页面/路由） ## 执行步骤 ### 1\.解析参数并获取回购信息 # 获取当前仓库信息 REPO=$(gh 存储库视图 --json nameWithOwner -q .nameWithOwner) # 获取 PR 信息（基础分支、头分支、标题、正文） gh pr view --json baseRefName,headRefName,title,body # 保存分支名称 BASE_BRANCH= # 例如主要 HEAD_BRANCH= # 例如功能/新用户界面 ### 2\.捕获“之前”屏幕截图（基础分支） # 存储所有未提交的更改，然后签出基础分支 git 存储 git checkout $BASE_BRANCH # 安装依赖项（如果它们不同）即插即用安装 # 启动开发服务器 Pnpm 开发 & DEV_PID=$! 睡5 # 创建截图目录 mkdir -p 文档/屏幕截图/之前文档/屏幕截图/之后 # 打开要截图的页面代理浏览器打开“http://localhost:3000/path/to/feature” 睡觉2 # 如果需要的话登录（检查 CLAUDE.md 的凭据）代理浏览器快照 -i 代理浏览器填写@e1“电子邮件” 代理浏览器填写@e2“密码” 代理浏览器单击@e3 # 导航到相关页面并截取屏幕截图代理浏览器屏幕截图 docs/screenshot/before/feature-overview.png 代理浏览器屏幕截图 docs/screenshot/before/feature-detail.png # 停止开发服务器并关闭浏览器代理浏览器关闭杀死 $DEV_PID 2>/dev/null ||真实 pkill -f“下一个开发” ||真实 ### 3\.捕获“之后”屏幕截图（PR 分支） # 检查 PR 分支 git checkout $HEAD_BRANCH git stash pop || git stash pop ||真实 # 安装依赖项即插即用安装 # 启动开发服务器 Pnpm 开发 & DEV_PID=$! 睡5 # 打开相同的页面代理浏览器打开“http://localhost:3000/path/to/feature” 睡觉2 # 如果需要登录（与之前的步骤相同）代理浏览器快照 -i 代理浏览器填写@e1“电子邮件” 代理浏览器填写@e2“密码” 代理浏览器单击@e3 # 导航到同一页面并截取屏幕截图代理浏览器屏幕截图 docs/screenshot/after/feature-overview.png 代理浏览器屏幕截图 docs/screenshot/after/feature-detail.png # 停止开发服务器并关闭浏览器代理浏览器关闭杀死 $DEV_PID 2>/dev/null ||真实 pkill -f“下一个开发” ||真实 ### 4\.屏幕截图命名约定在 `before/` 和 `after/` 中使用匹配的文件名，这样比较表就很容易构建：文档/截图/ ├── 之前/ │ ├── 功能概述.png │ ├── 特征细节.png │ └── 特征-empty.png └── 之后/ ├── 功能概述.png ├── 特征细节.png └── 特征-空.png 命名思路： * `feature-overview.png` — 主视图 * `feature-detail.png` — 展开/详细视图 * `feature-empty.png` — 空状态 * `feature-loading.png` — 加载状态 * `feature-mobile.png` — 移动视口 ### 5\.提交&推送 git add 文档/屏幕截图/ git commit -m "$(cat <<'EOF' 文档：添加[功能]之前/之后的屏幕截图共同创作者：Claude Opus 4.5 EOF ）” git 推送 ### 6\.使用之前/之后比较表更新 PR 正文 **重要**：使用带有 `?raw=true` 的 GitHub CDN URL 格式： https://github.com//blob//docs/screenshot/<之前|之后>/<文件名>.png?raw=true 其中“”是步骤 1 中的“nameWithOwner”，“”是 **PR 头分支**。用比较表更新 PR 正文： gh pr 编辑 --body "$(cat <<'EOF' # 公关标题 ## 总结【现有总结】 ## 截图 ### 功能概述 |之前 |之后 | |--------|--------| | ![之前](https://github.com//blob//docs/screenshot/before/feature-overview.png?raw=true) | ![之后](https://github.com//blob//docs/screenshot/after/feature-overview.png?raw=true) | ### 详细视图 |之前 |之后 | |--------|--------| | ![之前](https://github.com//blob//docs/screenshot/before/feature-detail.png?raw=true) | ![之后](https://github.com//blob//docs/screenshot/after/feature-detail.png?raw=true) | [公关机构的其余部分] EOF ）” **每页/状态屏幕截图添加一个表格。** 每个表格都有一行，左侧为前图，右侧为后图。 ### 7\.清理代理浏览器关闭 pkill -f“下一个开发” ||真实 git checkout $HEAD_BRANCH ## GitHub CDN URL 格式始终使用此精确格式在 GitHub 中呈现图像： https://github.com/OWNER/REPO/blob/BRANCH/path/to/image.png?raw=true * **OWNER/REPO** ：从 `gh repo view --json nameWithOwner -q .nameWithOwner` 获取 * **BRANCH** : PR 头分支名称（从 `gh pr view` 获取） * **?raw=true** : 显示图像所需的后缀 ## 身份验证如果应用程序需要登录，请检查项目的“CLAUDE.md”以获取测试凭据。 ## 提示 * **一致性是关键** ：在两个分支上截取完全相同的页面/视口/状态，因此比较有意义 * 使用“代理浏览器选项卡列表”查看所有打开的选项卡 * 使用`agent-browser tab N`来切换标签 * 对于不在快照中的元素，请使用 CSS 选择器： `agent-browser click "button.submit"` * 滚动：`代理浏览器向下滚动 500` * 对于响应式比较，调整视口大小： `agent-browser eval "window.resizeTo(375, 812)"` * 如果基础分支上不存在页面（新页面），请跳过“之前”的屏幕截图，并在 PR 正文中将其标记为 **新页面**

公关截图

包含技能