Skip to main content

Visual regression testing with Apify and AI Vision Model

Workflow preview

Workflow preview
100%
Visual regression testing with Apify and AI Vision Model preview
Open on n8n.io

Important notice

This workflow is provided as-is. Please review and test before using in production.

1. Workflow Overview

This n8n workflow is a proof of concept template exploring how we might work with multimodal LLMs and their multi image analysis capabilities. In this demo, we compare 2 screenshots of a webpage ta...

Best for

  • Engineering automation workflows
  • AI Summarization automation workflows
  • advanced n8n builders looking for reusable templates

Tools used

n8n-nodes-base.googledrive, @n8n/n8n-nodes-langchain.lmchatgooglegemini, @n8n/n8n-nodes-langchain.outputparserstructured, n8n-nodes-base.stickynote, n8n-nodes-base.splitinbatches, n8n-nodes-base.wait, n8n-nodes-base.httprequest, n8n-nodes-base.googlesheets

Source and attribution

This workflow is cataloged by N8N Workflows and links back to its original n8n.io source page by Jimleuk.

Original n8n.io source

1.1 Workflow description

Title
Visual regression testing with Apify and AI Vision Model
Workflow name
Visual regression testing with Apify and AI Vision Model

This n8n workflow is a proof-of-concept template exploring how we might work with multimodal LLMs and their multi-image analysis capabilities. In this demo, we compare 2 screenshots of a webpage taken at different timestamps and pass both to our multimodal LLM for a visual comparison of differences. Handling multiple binary inputs (ie. images) in an AI request is supported by n8n's basic LLM node.

How it works

This template is intended to run as 2 parts: first to generate the base screenshots and next to run the visual regression test which captures fresh screenshots.

  • Starting with a list of webpages captured in a Google sheet, base screenshots are captured for each using a external web scraping service called Apify.com (I prefer Apify but feel free to use whichever web scraping service available to you)
  • These base screenshots are uploaded to Google Drive and will be referenced later when we run our testing.
  • Phase 2 of the workflow, we'll use a scheduled trigger to fire sometime in the future which will reuse our web scraping service to generate fresh screenshots of our desired webpages.
  • Next, re-download our base screenshots in parallel and with both old and new captures, we'll pass these to our LLM node. In the LLM node's options, we'll define 2 "user message" inputs with the type of binary (data) for our images.
  • Finally, we'll prompt our LLM with our testing criteria and capture the regressions detected. Note, results will vary depending on which LLM you use.
  • A final report can be generated using the LLM's output and is uploaded to Linear.

Requirements

  • Apify.com API key for web screenshotting service
  • Google Drive and Sheets access to store list of webpages and captures

Customising this workflow

  • Have your own preferred web screenshotting service? Feel free to swap out Apify with your service of choice.

  • If the web screenshot is too large, it may prove difficult for the LLM to spot differences with precision. Try splitting up captures into smaller images instead.

1.2 Logical Blocks

This catalog entry is organized from the workflow JSON. The node-level section below shows the executable blocks available for review before importing the template.

2. Block-by-Block Analysis

Block 1 - Base Image

Type / Role
n8n-nodes-base.googleDrive - googleDrive
Config choices
Version 3

Block 2 - Google Gemini Chat Model

Type / Role
@n8n/n8n-nodes-langchain.lmChatGoogleGemini - lmChatGoogleGemini
Config choices
Version 1

Block 3 - Structured Output Parser

Type / Role
@n8n/n8n-nodes-langchain.outputParserStructured - outputParserStructured
Config choices
Version 1.2

Block 4 - Sticky Note

Type / Role
n8n-nodes-base.stickyNote - stickyNote
Config choices
Version 1

Block 5 - Sticky Note1

Type / Role
n8n-nodes-base.stickyNote - stickyNote
Config choices
Version 1

Block 6 - Sticky Note2

Type / Role
n8n-nodes-base.stickyNote - stickyNote
Config choices
Version 1

Block 7 - Sticky Note3

Type / Role
n8n-nodes-base.stickyNote - stickyNote
Config choices
Version 1

Block 8 - Loop Over Items

Type / Role
n8n-nodes-base.splitInBatches - splitInBatches
Config choices
Version 3

Block 9 - Wait

Type / Role
n8n-nodes-base.wait - wait
Config choices
Version 1.1

Block 10 - Download Screenshot

Type / Role
n8n-nodes-base.httpRequest - httpRequest
Config choices
Version 4.2

Block 11 - Upload to Drive

Type / Role
n8n-nodes-base.googleDrive - googleDrive
Config choices
Version 3

Block 12 - Update Base Image

Type / Role
n8n-nodes-base.googleSheets - googleSheets
Config choices
Version 4.5

Block 13 - Merge

Type / Role
n8n-nodes-base.merge - merge
Config choices
Version 3

Block 14 - Schedule Trigger

Type / Role
n8n-nodes-base.scheduleTrigger - scheduleTrigger
Config choices
Version 1.2

Block 15 - Get URLs with Missing Base Images

Type / Role
n8n-nodes-base.googleSheets - googleSheets
Config choices
Version 4.5

Block 16 - Run Webpage Screenshot

Type / Role
n8n-nodes-base.httpRequest - httpRequest
Config choices
Version 4.2

Block 17 - Run Webpage Screenshot1

Type / Role
n8n-nodes-base.httpRequest - httpRequest
Config choices
Version 4.2

Block 18 - Has Changes

Type / Role
n8n-nodes-base.filter - filter
Config choices
Version 2.2

Block 19 - Combine Row and Result

Type / Role
n8n-nodes-base.set - set
Config choices
Version 3.4

Block 20 - Wait1

Type / Role
n8n-nodes-base.wait - wait
Config choices
Version 1.1

Block 21 - Aggregate

Type / Role
n8n-nodes-base.aggregate - aggregate
Config choices
Version 1

Block 22 - Create Report

Type / Role
n8n-nodes-base.linear - linear
Config choices
Version 1

Block 23 - When clicking ‘Test workflow’

Type / Role
n8n-nodes-base.manualTrigger - manualTrigger
Config choices
Version 1

Block 24 - Get Webpages List

Type / Role
n8n-nodes-base.googleSheets - googleSheets
Config choices
Version 4.5

Showing the first 24 of 34 workflow blocks. Download the JSON for the full node graph.

3. Summary Table

Workflow Visual regression testing with Apify and AI Vision Model
Complexity advanced
Nodes 34
Categories Engineering, AI Summarization
Author Jimleuk
Published 18 Sept 2024

4. Reproducing the Workflow from Scratch

  1. 1. Download the workflow JSON

    Use the JSON export at /data/workflows/2419/2419.json as the source template for this automation.

  2. 2. Import the template into n8n

    Open n8n, import the downloaded JSON, and review each node before activating the workflow.

  3. 3. Configure credentials and variables

    Replace placeholder credentials, API keys, webhook URLs, account IDs, and environment-specific values with your own settings.

  4. 4. Test with sample data

    Run the workflow manually or in a staging workspace, inspect node output, and confirm downstream systems receive the expected data.

  5. 5. Activate and monitor

    Enable the workflow only after testing, then monitor executions, errors, and rate limits during the first production runs.

5. General Notes & Resources

Review imported nodes carefully before activation. This catalog entry is intended to help you inspect the workflow structure, understand required services, and find related templates faster.

Node names, credentials, schedules, webhook paths, and external service limits may need adjustment for your workspace.

Frequently asked questions

What does Visual regression testing with Apify and AI Vision Model do?

This n8n workflow is a proof of concept template exploring how we might work with multimodal LLMs and their multi image analysis capabilities. In this demo, we compare 2 screenshots of a webpage ta...

What do I need before importing this workflow?

Review the workflow JSON, configure any required credentials in n8n, and test the automation in a safe workspace before using it in production.

Can I customize this workflow?

Yes. Use the block-by-block analysis and the downloadable JSON to inspect each node, then adjust credentials, prompts, schedules, filters, or destinations for your Engineering, AI Summarization use case.