Post-Deploy Visual Regression Detection: Snapshot Site + Slack + GitHub

After CI deploy → Webhook trigger → wait for render stability → Snapshot Site screenshot compare → Slack alert and GitHub Issue on mismatch

Who

DevOps and frontend teams who need automated visual verification after each deployment

You get

Automatically compare baseline and deployed pages after deploy, alerting the team and creating a tracking issue when layout regression is detected

You need

n8n · slack · github · snapshot-site

Steps

1. Install community node and configure credentials

   In n8n Settings, go to Community nodes and install the verified `n8n-nodes-snapshot-site`. Then add three credentials: Snapshot Site API, Slack, and GitHub (using a personal access token with repo scope). Pre-fill the repository owner and repository name in the GitHub node.

2. Configure Webhook and CI integration

   Activate the workflow, then copy the Webhook node's Production URL. Configure the last step of your CI pipeline to POST a JSON body containing `url` (deployed page address), `baselineUrl` (baseline address), and optionally `commit` (commit SHA) and `environment` (environment name). Ensure both URLs are full https addresses.

3. Set wait time and screenshot comparison

   After receiving the Webhook, the Wait node pauses for 45 seconds (adjustable to 30–60s) to let CDN caches and client-side rendering stabilize. Then the Compare Deploy to Baseline node calls Snapshot Site Compare with `afterUrl` set to `$json.body.url`, `beforeUrl` to `$json.body.baselineUrl`, operation set to compare, and afterOptions including delay:3, fullSize:true, hideCookie:true. The node is configured with maxTries:3, waitBetweenTries:5000, routing hard errors to the error output.

4. Configure error handling and regression detection branches

   The Check for API Error node evaluates `$json.error === true`; if true, it routes to the Slack failure alert branch. If false, it proceeds to the Check for Layout Regression node, which checks `$json.summary.mismatchPercentage >= 10`. Meeting the threshold enters the regression handling branch; otherwise it ends silently via No-Op.

5. Configure Slack and GitHub notifications

   The regression branch triggers two nodes in parallel: Notify Visual Regression on Slack sends a formatted message with mismatch percentage and diff/before/after links to the #deploys channel; Create Visual Regression Issue on GitHub creates an issue with environment, commit, mismatch data, and screenshot links in title and body. The API error branch sends error details to #deploys-alerts via Notify Comparison Failure on Slack.

   Execution prompt · Source text。Notify Visual Regression on Slack node text parameter

   Copy prompt

   =🚨 *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>

   Execution prompt · Source text。Notify Comparison Failure on Slack node text parameter

   Copy prompt

   =🔴 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 }}

You are setting up an n8n workflow to automatically detect visual regressions after CI deploys. First confirm you have: access to an n8n instance, a Snapshot Site API key, Slack workspace admin rights, and a GitHub repo-scoped PAT. Then proceed in order: 1) Install the n8n-nodes-snapshot-site community node and configure the three credentials; 2) Import the template or manually create nodes and connections per workflow.json; 3) Change the GitHub node's owner/repository to your actual repo; 4) Copy the Webhook Production URL into your CI's final step; 5) Trigger with a test POST and verify Slack and GitHub output formatting.