如何在GitLab CI流水线中集成Percy Storybook测试并校验结果？

核心配置：让Percy结果影响CI状态 #

Percy默认不会直接终止CI流水线，你需要通过两个关键操作实现差异触发失败：

方法1：使用Percy CLI的build:wait命令 #

在CI脚本中执行Percy构建后，添加percy build:wait命令轮询构建结果，当存在未批准的视觉差异时，该命令会返回非零退出码，直接让GitLab CI任务失败。

示例.gitlab-ci.yml片段：

storybook-percy-visual-test:
  stage: test
  script:
    # 先构建Storybook静态文件
    - npm run build-storybook
    # 触发Percy构建并提取构建ID
    - |
      BUILD_OUTPUT=$(npx percy storybook ./storybook-static)
      BUILD_ID=$(echo "$BUILD_OUTPUT" | grep -o 'Build ID: [0-9]*' | awk '{print $3}')
    # 等待Percy构建结果，有未批准差异则失败
    - npx percy build:wait --project <你的Percy项目ID> --build $BUILD_ID
  variables:
    PERCY_TOKEN: $PERCY_TOKEN # 在GitLab CI变量中配置Percy令牌

方法2：开启Percy自动拒绝配置 #

在Percy项目的设置页面，找到**"Build Approval"**相关选项，开启"自动拒绝未批准的构建"。这样当检测到视觉差异时，Percy会自动标记构建为"拒绝"，配合上面的build:wait命令就能直接让CI流水线失败。

相关文档位置 #

你需要查看以下Percy文档内容：

• Percy CLI命令参考：搜索build:wait命令，里面有完整的参数说明和使用场景
• GitLab CI集成进阶章节：在你提到的Percy GitLab CI文档页面，向下滚动到**"Advanced configuration"**部分，里面有关于CI流水线响应Percy状态的详细说明

额外注意点 #

• 确保GitLab CI中配置的PERCY_TOKEN拥有读取Percy构建状态的权限
• 合并请求流水线场景下，Percy会自动关联目标分支的基准构建，无需额外配置对比分支

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