Automated Visual Regression Testing with n8n, Apify, and Gemini Vision

Read webpage URLs → Apify screenshots → Gemini visual diff → Linear issue; manually seed baselines first, then schedule weekly checks

Who

QA engineers and front-end teams with n8n experience who need automated visual regression detection

You get

Automatically compare weekly screenshots against baselines and create a Linear issue when differences are detected

You need

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

Steps

1. Generate baseline screenshots (manual run)

   Click 'Test workflow' in n8n to manually trigger. The workflow reads rows from Google Sheets that are missing a baseline image (Get URLs with Missing Base Images), then loops each URL: call the Apify screenshot actor → wait for completion → download the screenshot file → upload to Google Drive → write the Drive file ID back to the 'base' column in Sheets. Only after all URLs have baselines should you proceed to scheduled checks.

   Setup guidance · Source text。Main Overview sticky note content field (overview, verbatim)

   Copy prompt

   ## 🔍 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. Scheduled capture of new screenshots (Schedule Trigger)

   Enable the Schedule Trigger (defaults to Mondays at 06:00). The workflow reads all test webpages from Sheets (Get Webpages List), then loops each page: download the baseline screenshot from Drive → call Apify for a fresh screenshot → download the new screenshot → merge baseline and new image into a single item for downstream AI processing.

3. Gemini visual regression comparison

   The Visual Regression Agent node sends both screenshots to the Google Gemini Chat Model (gemini-1.5-pro-latest). A system prompt instructs the model to identify changes to text content, images, colors, position, and layout while ignoring text styling or casing changes. The two images are passed as binary image data_1 (baseline) and data_2 (new). The Structured Output Parser enforces a fixed JSON Schema array where each item contains type, description, previous_state, and current_state. A Wait1 node pauses 1 second after each AI call to respect rate limits.

   Execution prompt · Source text。Visual Regression Agent node text field (chainLlm primary instruction)

   Copy prompt

   Identify changes between the base image and test image.

   Execution prompt · Source text。Visual Regression Agent node messages.messageValues[0].message (system prompt)

   Copy 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.

   Execution prompt · Source text。Structured Output Parser node inputSchema field

   Copy prompt

   {
    "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. Aggregate and create Linear report

   Combine Row and Result merges each Sheets row with the AI output. Has Changes filters out pages with an empty output array. Aggregate collects all flagged pages into a single dataset. Create Report opens a Linear issue titled with the current date, listing each page URL and its specific regressions (description, previous_state, current_state).

   Execution prompt · Source text。Create Report node title field

   Copy prompt

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

   Execution prompt · Source text。Create Report node additionalFields.description field

   Copy prompt

   =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. Configure credentials and permissions

   Complete the following 5 credential setups in order (estimated ~15 minutes): 1) Apify: add your API token in both Run Webpage Screenshot and Run Webpage Screenshot1 nodes, using HTTP Query Auth; 2) Google Sheets: connect your account in Get URLs with Missing Base Images, Update Base Image, and Get Webpages List nodes, ensuring the sheet has 'url' and 'base' columns; 3) Google Drive: connect your account in Base Image (download) and Upload to Drive (upload) nodes, setting the destination folder for baseline images; 4) Google Gemini: add your API key in the Google Gemini Chat Model node; 5) Linear: connect your Linear API credential in the Create Report node and select the target team ID.

6. Main setup prompt (optional)

   Use the following starter prompt when working with an AI assistant to reproduce or troubleshoot.

   Setup guidance · Editorial suggestion。Setup assistant: confirm input sheet structure and permissions first

   Copy prompt

   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.