部署后自动视觉回归检测：Snapshot Site + Slack + GitHub

CI 部署后 → Webhook 触发 → 等待渲染稳定 → Snapshot Site 截图比对 → 异常时 Slack 告警并创建 GitHub Issue

给谁

运维与前端团队，需要自动化验证每次部署后的页面视觉效果

你会得到

部署完成后自动比对基线与部署页，发现布局回归时即时通知团队并创建跟踪工单

你需要

n8n · slack · github · snapshot-site

步骤

1. 安装社区节点并配置凭证

   在 n8n 设置中进入 Community nodes，安装已验证的 `n8n-nodes-snapshot-site`。随后添加三类凭证：Snapshot Site API 凭证、Slack 凭证、GitHub 凭证（使用具有 repo 权限的个人访问令牌）。在 GitHub 节点中预先填写仓库 owner 与 repository 名称。

2. 配置 Webhook 与 CI 集成

   激活工作流后，复制 Webhook 节点的 Production URL。在 CI 流水线最后一步配置 POST 请求，发送 JSON 体包含 `url`（部署页地址）、`baselineUrl`（基线地址），可选 `commit`（提交 SHA）与 `environment`（环境名）。确保两个 URL 均为完整 https 格式。

3. 设置等待与截图比对

   工作流接收 Webhook 后，Wait 节点等待 45 秒（可调整为 30–60 秒），让 CDN 缓存与客户端渲染稳定。随后 Compare Deploy to Baseline 节点调用 Snapshot Site Compare，参数 `afterUrl` 取 `$json.body.url`，`beforeUrl` 取 `$json.body.baselineUrl`，operation 为 compare，afterOptions 含 delay:3、fullSize:true、hideCookie:true。节点配置 maxTries:3、waitBetweenTries:5000，硬错误走 error output。

4. 配置错误处理与回归检测分支

   Check for API Error 节点检查 `$json.error === true`，为真时走 Slack 失败告警分支；为假时进入 Check for Layout Regression 节点。后者检查 `$json.summary.mismatchPercentage >= 10`，达到阈值则进入回归处理分支，否则走 No-Op 静默结束。

5. 配置 Slack 与 GitHub 通知

   回归分支并行触发两个节点：Notify Visual Regression on Slack 发送含 mismatch 百分比、diff/before/after 链接的格式化消息到 #deploys 频道；Create Visual Regression Issue on GitHub 创建 Issue，标题与正文含环境、提交、 mismatch 数据及截图链接。API 错误分支由 Notify Comparison Failure on Slack 发送错误信息到 #deploys-alerts。

   运行提示词 · 来源原文。Notify Visual Regression on Slack 节点的 text 参数

   复制提示词

   =🚨 *Visual regression after deploy* — `{{ $('When a Deploy Finishes').first().json.body.environment || 'production' }}` @ `{{ $('When a Deploy Finishes').first().json.body.commit || 'unknown commit' }}`
   Mismatch *{{ $json.summary.mismatchPercentage }}%* ({{ $json.summary.mismatchPixels.toLocaleString() }} of {{ $json.summary.totalPixels.toLocaleString() }} px){{ $json.summary.sameDimensions ? '' : ' · page dimensions changed' }} on {{ $json.after.source }}
   <{{ $json.diff.link }}|View diff> · <{{ $json.before.link }}|Baseline> · <{{ $json.after.link }}|Deployed>

   运行提示词 · 来源原文。Notify Comparison Failure on Slack 节点的 text 参数

   复制提示词

   =🔴 Post-deploy visual smoke test could not run for `{{ $('When a Deploy Finishes').first().json.body.environment || 'production' }}` @ `{{ $('When a Deploy Finishes').first().json.body.commit || 'unknown commit' }}`: {{ $json.error?.message || $json.message }}

你正在搭建一个 n8n 工作流，用于在 CI 部署后自动检测视觉回归。请先确认你已具备：n8n 实例访问权限、Snapshot Site API 密钥、Slack 工作区管理员权限、GitHub 仓库的 repo 权限 PAT。然后按以下顺序执行：1) 安装 n8n-nodes-snapshot-site 社区节点并配置三类凭证；2) 导入模板或按 workflow.json 手动创建节点与连接；3) 修改 GitHub 节点的 owner/repository 为你的实际仓库；4) 复制 Webhook Production URL 到 CI 最后一步；5) 先用测试 POST 触发，验证 Slack 与 GitHub 输出格式。