{"product_id":"post-deploy-visual-regression-in-n8n-slack-github","title":"Post-Deploy Visual Regression in n8n: Slack + GitHub","description":"\u003ch3\u003eCatch visual regressions after every deploy—automatically notify Slack and open a GitHub issue\u003c\/h3\u003e\n\u003cp\u003eThis n8n workflow runs a post-deploy visual comparison using Snapshot Site: it screenshots your baseline and newly deployed page, detects meaningful UI mismatches, alerts your team in \u003cstrong\u003eSlack\u003c\/strong\u003e, and—when the regression crosses a defined threshold—creates a \u003cstrong\u003eGitHub\u003c\/strong\u003e issue with the evidence.\u003c\/p\u003e\n\n\u003ch3\u003eWhat this workflow does\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eReceives a post-deploy webhook\u003c\/strong\u003e (from your CI\/CD pipeline) via an HTTP \u003cstrong\u003ePOST webhook\u003c\/strong\u003e containing the deployed page URL, baseline URL, plus optional \u003cem\u003ecommit\u003c\/em\u003e and \u003cem\u003eenvironment\u003c\/em\u003e values.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eWaits for the page to settle\u003c\/strong\u003e for \u003cstrong\u003e45 seconds\u003c\/strong\u003e to allow CDN caches and client-side rendering to stabilize before taking screenshots.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eCompares baseline vs deployed\u003c\/strong\u003e using \u003cstrong\u003eSnapshot Site Compare\u003c\/strong\u003e.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eHandles failures\u003c\/strong\u003e by detecting comparison failures (hard request errors or Snapshot Site soft errors) and sending an alert to your configured Slack channel.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eCalculates mismatch impact\u003c\/strong\u003e and checks whether the mismatch percentage exceeds a \u003cstrong\u003e10%\u003c\/strong\u003e threshold to classify a \u003cem\u003elayout regression\u003c\/em\u003e.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eReports regressions\u003c\/strong\u003e with a detailed Slack message (including diff\/before\/after links) and \u003cstrong\u003eopens a GitHub issue\u003c\/strong\u003e with the same evidence; otherwise it exits without action.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eUse cases\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003ePrevent UI breakages in production by validating visual changes after each deployment.\u003c\/li\u003e\n  \u003cli\u003eSpeed up triage: send comparison failures and visual diffs directly to a Slack channel your team watches.\u003c\/li\u003e\n  \u003cli\u003eMaintain an audit trail in GitHub by automatically filing issues when a visual regression surpasses the 10% threshold.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eTechnical details\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eNodes \/ integrations:\u003c\/strong\u003e Webhook, Wait (45s), if, no op, Slack, GitHub.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eSnapshot Site:\u003c\/strong\u003e requires the verified community node \u003ccode\u003en8n-nodes-snapshot-site\u003c\/code\u003e and Snapshot Site API credentials.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eGitHub:\u003c\/strong\u003e uses a personal access token with \u003cstrong\u003erepo\u003c\/strong\u003e scope to create issues (repository owner\/name configured in the step).\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eSetup:\u003c\/strong\u003e configure Slack channels (e.g., \u003ccode\u003e#deploys\u003c\/code\u003e for regressions and \u003ccode\u003e#deploys-alerts\u003c\/code\u003e for comparison failures), activate the workflow, then copy the Webhook node Production URL for your CI\/CD pipeline.\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"N8N Commerce","offers":[{"title":"Default Title","offer_id":45837476331699,"sku":"N8N-18133","price":34.99,"currency_code":"GBP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0749\/6279\/6723\/files\/6uYFuNdutQM928me145y_XDVpOF0X.png?v=1786794963","url":"https:\/\/buyflowscripts.com\/products\/post-deploy-visual-regression-in-n8n-slack-github","provider":"N8N Commerce","version":"1.0","type":"link"}