如何在GitHub Actions中批准BackstopJS参考镜像？

BackstopJS常规工作流程 #

• 预先生成浏览器页面的参考镜像
• 运行BackstopJS测试，对比实际浏览器视图与参考镜像
• 打开生成的HTML报告，判断实际视图或参考镜像哪个正确
• 若实际视图是更新后的正确版本，执行backstop approve命令，用新的实际镜像覆盖参考镜像

已实现的GitHub Actions工作流步骤 #

• 从S3存储桶下载参考镜像
• 运行BackstopJS测试
• 将HTML报告和实际测试生成的镜像保存为GitHub工件
• 下载工件中的HTML报告，人工检查新版本镜像是否正确

当前问题 #

测试工作流结束后，无法再执行backstop approve来批准新镜像，想知道两种方案是否可行：

1. 在Pull Request中添加交互，当测试Action失败时，将工件中的新镜像上传至S3作为新参考镜像？
2. 通过带参数（比如设置环境变量AUTO_APPROVE=true）重跑失败的测试，完成新镜像的批准？

可行解决方案 #

方案1：PR中添加交互式批准触发 #

可以通过GitHub Actions的workflow_dispatch事件结合PR标签/评论触发二次工作流：

• 当测试失败后，在PR中添加特定标签（比如approve-backstop）或者评论特定指令（比如!approve-backstop）
• 配置一个监听PR标签/评论变化的工作流，触发后从工件中下载新生成的实际镜像，执行backstop approve（不需要重新跑测试，直接用已有的测试产物），然后将更新后的参考镜像上传回S3
• 注意要给工作流配置足够的权限，能访问S3和GitHub工件

方案2：带参数重跑测试实现自动批准 #

这种方案更直接，具体实现：

• 给你的测试工作流添加workflow_dispatch触发方式，同时定义一个布尔型输入参数（比如auto_approve，默认值false）
• 在工作流中，当auto_approve为true时，在测试结束后直接执行backstop approve命令，然后将新的参考镜像上传回S3（可以加判断逻辑，只在测试失败时执行，避免无意义覆盖）
• 测试失败后，直接通过GitHub页面手动触发该工作流，勾选auto_approve参数，就能完成批准和上传操作

额外提示 #

• 不管用哪种方案，都要确保backstop approve执行时能访问到测试生成的实际镜像文件（也就是从工件下载后的路径要和BackstopJS配置里的路径一致）
• 上传S3时可以覆盖原有参考镜像，建议给S3对象开启版本控制，避免误操作后无法回滚

内容的提问来源于stack exchange，提问作者rzlvmp