用途:当提交涉及 apps/lite/ui 的 Lite UI 变更需要展示视觉效果时,在本地捕获变更前后的界面截图,把有差异的界面发布到 PR 评论。截图在本机运行而非 CI(CI 下 Electron 在裸 X server 上加载后渲染不可靠而被放弃)。
主要能力:先通过阅读 diff 判断变更影响的屏幕是否已被 apps/lite/e2e/tests/screenshots.spec.ts 的目录覆盖(工作区侧栏、diff 面板、分支标签、上游标签、项目选择器、未提交行、提交表单、设置)。已覆盖则按流程捕获;未覆盖应停下询问开发者,由其决定加入目录(适合屏幕级缺口,新增永久覆盖)或临时捕获(适合一次性状态),两者都拒绝则不发表评论。比较脚本 compare-screenshots.mjs 会打印 total=/changed=/added=,只暂存有差异的图片并生成评论正文;未变化的界面合并为折叠列表。图片发布到孤儿分支 pr-screenshots 的 pr-<number>/<short-sha>/ 下,用 git data API 写入;评论采用以 <!-- lite-screenshots --> 开头的单条评论 upsert(PATCH 或 POST),不改写 PR 描述;随后移除 screenshots needed 并加上 screenshots 标签。
必要用法:先 cargo build -p but 得到 target/debug/but;命令均从仓库根运行,并用 env -u ELECTRON_RUN_AS_NODE 包裹,避免继承 VS Code 的 ELECTRON_RUN_AS_NODE=1 导致启动失败。捕获 head 用 SCREENSHOT_OUT=head BUT=$PWD/target/debug/but pnpm -F @gitbutler/lite test:e2e screenshots.spec.ts;捕获 base 前先 but unapply <branch> 并 but status 确认,运行后立即 but apply <branch>。堆叠分支需改用工作区回退方式,避免连带 unapply 其他分支。
限制:滚动条与留白(macOS 默认隐藏,需把显示滚动条设为始终)、hover/focus/drag 状态、滚动位置之后的内容无法捕获;原生右键菜单、深色模式(harness 固定 light)、需要真实远端或凭据的状态均不在覆盖范围。非真实应用截图需标注并改用 <!-- lite-screenshots-replica --> 标记。临时 spec 需在 base 运行后删除,且不可与目录 spec 同一条命令运行(配置为 fullyParallel,目录 spec 的 beforeAll 会清空 SCREENSHOT_OUT)。完成后应人工查看图片并用 but status 确认工作区完好。