{"product_id":"n8n-workflow-post-pr-preview-screenshots-to-github","title":"n8n Workflow: Post PR Preview Screenshots to GitHub","description":"\u003ch3\u003eAutomatically add preview screenshot results to your GitHub Pull Requests\u003c\/h3\u003e\n\u003cp\u003eThis n8n workflow listens for a CI webhook when a PR preview is deployed, captures full-page screenshots (only for the changed routes) using \u003cstrong\u003eSnapshot Site\u003c\/strong\u003e, and posts a \u003cstrong\u003esingle, GitHub pull request comment\u003c\/strong\u003e with a summary table, embedded previews, and any capture failures.\u003c\/p\u003e\n\n\u003ch3\u003eWhat this workflow does\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eReceives a POST webhook\u003c\/strong\u003e from your CI containing: GitHub owner, repository, PR number, preview base URL, and a list of changed page routes to capture.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eValidates and builds URLs\u003c\/strong\u003e: generates full \u003ccode\u003ehttps:\/\/\u003c\/code\u003e URLs per route, removes duplicates, and enforces a configurable maximum number of pages to screenshot.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eWaits for the preview to warm up\u003c\/strong\u003e by pausing for \u003cstrong\u003e30 seconds\u003c\/strong\u003e before capture.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eCaptures full-page screenshots\u003c\/strong\u003e via \u003cstrong\u003eSnapshot Site\u003c\/strong\u003e using WebP output at \u003cstrong\u003e1280px width\u003c\/strong\u003e, with \u003cstrong\u003ecookie banners hidden\u003c\/strong\u003e.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eReports per-page outcomes\u003c\/strong\u003e: records each capture as success (including an image link) or failure (including the error message) without stopping the run on errors.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003ePosts one GitHub comment\u003c\/strong\u003e: creates a GitHub-flavoured Markdown comment containing a results table, collapsible screenshot previews, and a list of pages that \u003cem\u003ecould not be captured\u003c\/em\u003e.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eUse cases\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003eCatch UI regressions early by sharing PR preview screenshots directly in GitHub.\u003c\/li\u003e\n  \u003cli\u003eReduce noise by capturing only \u003cstrong\u003echanged preview routes\u003c\/strong\u003e rather than every page.\u003c\/li\u003e\n  \u003cli\u003eImprove engineering feedback loops for SaaS and web apps with automated preview deployments.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eTechnical details\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eNodes \/ logic:\u003c\/strong\u003e \u003ccode\u003eif\u003c\/code\u003e, \u003ccode\u003eset\u003c\/code\u003e, \u003ccode\u003ecode\u003c\/code\u003e, \u003ccode\u003ewait\u003c\/code\u003e, \u003ccode\u003ewebhook\u003c\/code\u003e, \u003ccode\u003egithub\u003c\/code\u003e\n\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eSnapshot Site integration:\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 integration:\u003c\/strong\u003e requires GitHub credentials with permission to create pull request comments (classic PAT with \u003ccode\u003erepo\u003c\/code\u003e, or fine-grained token with Pull requests: Read and write for the target repository).\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"N8N Commerce","offers":[{"title":"Default Title","offer_id":45945734430899,"sku":"N8N-19073","price":47.99,"currency_code":"GBP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0749\/6279\/6723\/files\/g0IyKvrLlCXlWDS2utjCL_hc2YyN4o.png?v=1788427101","url":"https:\/\/buyflowscripts.com\/products\/n8n-workflow-post-pr-preview-screenshots-to-github","provider":"N8N Commerce","version":"1.0","type":"link"}