用 n8n + Apify + Gemini 实现网站视觉回归自动检测

读取网页 URL → Apify 截图 → Gemini 视觉对比 → Linear 报告；先手动生成基线，再定时巡检

给谁

有 n8n 使用经验、需要自动化视觉回归检测的 QA 或前端团队

你会得到

按周自动对比网页截图与基线，发现差异后自动创建 Linear issue

你需要

n8n · apify · google-drive · google-sheets · linear

步骤

1. 生成基线截图（手动运行）

   在 n8n 中点击「Test workflow」手动触发。工作流读取 Google Sheets 中缺少基线图片的行（Get URLs with Missing Base Images），对每行 URL 循环执行：调用 Apify screenshot actor 截图 → 等待运行完成 → 下载截图文件 → 上传至 Google Drive → 将 Drive file ID 写回 Sheets 对应行的 base 列。全部 URL 完成基线后，方可进入定时巡检。

   搭建指导 · 来源原文。「Main Overview」粘性说明节点的 content 字段（总览，逐字保留）

   复制提示词

   ## 🔍 Visual Regression Testing with Apify & AI Vision
   
   Captures fresh screenshots of your web pages with Apify, compares them against stored baseline images using a Gemini vision model, and files a Linear issue whenever a visual regression is detected.
   
   **Perfect for:** QA engineers and front-end teams who want automated, pixel-aware visual regression checks without writing assertion code.
   
   ---
   
   ## How it works
   
   **Part A — Generate base images (run manually first)**
   
   1. **When clicking 'Test workflow'** — Manually starts the baseline-generation run.
   2. **Get URLs with Missing Base Images** — Reads the Google Sheet for any rows that have a URL but no stored base screenshot.
   3. **Loop Over Items** — Iterates through each URL that needs a baseline.
   4. **Run Webpage Screenshot** — Calls the Apify screenshot actor to capture the page.
   5. **Wait** — Pauses for the Apify run to finish before looping again.
   6. **Merge** — Recombines the loop output with the screenshot result.
   7. **Download Screenshot** — Fetches the rendered screenshot file from the Apify URL.
   8. **Upload to Drive** — Saves the baseline image to Google Drive.
   9. **Update Base Image** — Writes the new Drive file ID back into the Google Sheet.
   
   **Part B — Run the regression test (scheduled)**
   
   10. **Schedule Trigger** — Fires the regression run on a recurring schedule.
   11. **Get Webpages List** — Reads every page to test from the Google Sheet.
   12. **For Each Webpage...** — Loops through each page one at a time.
   13. **Base Image** — Downloads the stored baseline screenshot from Google Drive.
   14. **Run Webpage Screenshot1** — Calls the Apify actor to capture a fresh screenshot.
   15. **Download New Screenshot** — Fetches that fresh screenshot file from Apify.
   16. **Combine Screenshots** — Merges the baseline and the new image into one item.
   17. **Visual Regression Agent** — Sends both images to the AI model to detect differences.
   18. **Google Gemini Chat Model** — The Gemini vision model that performs the comparison.
   19. **Structured Output Parser** — Forces the AI to return a typed list of regressions.
   20. **Wait1** — Throttles between AI calls to respect rate limits.
   21. **Combine Row and Result** — Joins the sheet row with the AI's regression findings.
   22. **Has Changes** — Filters out pages where no regression was found.
   23. **Aggregate** — Collects all flagged pages into a single dataset.
   24. **Create Report** — Files a Linear issue summarising the detected regressions.
   
   ---
   
   ## Setup (~15 minutes)
   
   1. **Apify** — Add your Apify token (Query Auth) in the *Run Webpage Screenshot* and *Run Webpage Screenshot1* nodes.
   2. **Google Sheets** — Connect your account in *Get URLs with Missing Base Images*, *Update Base Image*, and *Get Webpages List*; the sheet needs a URL column and a base-image column.
   3. **Google Drive** — Connect your account in *Base Image* and *Upload to Drive* for baseline storage.
   4. **Google Gemini (PaLM) API** — Add your key in the *Google Gemini Chat Model* node.
   5. **Linear** — Connect your Linear API credential in the *Create Report* node and pick the target team.
   > Run Part A manually first to seed every page's baseline before enabling the Schedule Trigger. Apify screenshot runs are billed per execution, so watch your actor usage.

2. 定时捕获新截图（Schedule Trigger）

   启用 Schedule Trigger（默认每周一 06:00 执行）。工作流读取 Sheets 中全部待测网页（Get Webpages List），逐页循环：从 Drive 下载该页基线截图 → 调用 Apify 重新截图 → 下载新截图 → 将基线与最新截图合并为单一数据项，供下游 AI 节点处理。

3. Gemini 视觉回归对比

   Visual Regression Agent 节点将两张截图发送至 Google Gemini Chat Model（gemini-1.5-pro-latest）。节点内定义 system 提示词要求模型识别文本、图片、颜色、位置与布局变化，忽略字体样式或大小写变更；两张图分别以 binary image data_1（基线）和 data_2（新图）传入。Structured Output Parser 强制模型返回固定 JSON Schema 的数组，每项包含 type、description、previous_state、current_state。Wait1 节点在每次 AI 调用后等待 1 秒以控制速率。

   运行提示词 · 来源原文。Visual Regression Agent 节点的 text 字段（chainLlm 主指令）

   复制提示词

   Identify changes between the base image and test image.

   运行提示词 · 来源原文。Visual Regression Agent 节点的 messages.messageValues[0].message（system prompt）

   复制提示词

   =You help with visual regression testing for websites. Identify changes to text content, images, colors, position and layouts of the elements in the screenshots. Ignore text styling or casing changes.
   The first image will be the base image and the second image will be the test. Note all changes to the test image which differ from the base. If there are no changes, it is okay to return an empty array.

   运行提示词 · 来源原文。Structured Output Parser 节点的 inputSchema 字段

   复制提示词

   {
    "type": "array",
    "items": {
    "type": "object",
   	"properties": {
   		"type": {
    		"type": "string",
    "description": "type of regression. One of text, number, image, color or position."
    		},
   		"description": { "type": "string" },
    "previous_state": { "type": "string" },
    "current_state": { "type": "string" }
   	}
    }
   }

4. 汇总并创建 Linear 报告

   Combine Row and Result 将 Sheets 行数据与 AI 输出合并；Has Changes 过滤掉 output 为空数组的页面；Aggregate 将所有有变更的页面聚合为单一数据集；Create Report 在 Linear 创建 issue，标题含日期，正文列出每页 URL 及其具体回归项（description、previous_state、current_state）。

   运行提示词 · 来源原文。Create Report 节点的 title 字段

   复制提示词

   =Visual Regression Report {{ $now.format('yyyy-MM-dd') }}

   运行提示词 · 来源原文。Create Report 节点的 additionalFields.description 字段

   复制提示词

   =Visual Regression Workflow picked up the following changes:
   
   {{
   $json.data.map(row =>
   `### ${row.url}
   ${row.output.map(issue =>
   `* **${issue.description}** - expected "${issue.previous_state}" but got "${issue.current_state}"`
   ).join('\n')}`
   ).join('\n');
   }}

5. 配置凭证与权限

   按顺序完成以下 5 项凭证配置（预计约 15 分钟）：1) Apify：在 Run Webpage Screenshot 与 Run Webpage Screenshot1 节点添加 API token，认证方式选 HTTP Query Auth；2) Google Sheets：在 Get URLs with Missing Base Images、Update Base Image、Get Webpages List 节点连接账号，确认表格包含 url 与 base 两列；3) Google Drive：在 Base Image（下载）与 Upload to Drive（上传）节点连接账号，设定基线图片存放文件夹；4) Google Gemini：在 Google Gemini Chat Model 节点添加 API key；5) Linear：在 Create Report 节点连接 API credential 并选择目标 team ID。

6. 主搭建提示词（可选）

   如需在 AI 助手协助下复现或排查，可使用以下启动词说明目标与输入变量。

   搭建指导 · 本站建议版本。交给搭建助手，先确认输入表格结构与权限

   复制提示词

   You are a setup assistant for an n8n visual-regression workflow. The workflow uses Apify to capture screenshots, Google Drive/Sheets for baseline storage, Google Gemini (gemini-1.5-pro-latest) for vision comparison, and Linear for issue tracking. Inputs: a Google Sheet with columns 'url' and 'base' (Drive file ID). Before enabling the Schedule Trigger, run the manual baseline-generation branch once to populate 'base' for every row. Apify screenshot actor is billed per execution; monitor usage. Confirm credentials are configured for all 5 services before testing.

You are a setup assistant for an n8n visual-regression workflow. The workflow uses Apify to capture screenshots, Google Drive/Sheets for baseline storage, Google Gemini (gemini-1.5-pro-latest) for vision comparison, and Linear for issue tracking. Inputs: a Google Sheet with columns 'url' and 'base' (Drive file ID). Before enabling the Schedule Trigger, run the manual baseline-generation branch once to populate 'base' for every row. Apify screenshot actor is billed per execution; monitor usage. Confirm credentials are configured for all 5 services before testing.