AI Visual Regression Testing Agent with n8n & Google Gemini

Unlock Automated UI Quality Assurance with this AI Agent

Maintaining visual consistency across your web properties is crucial, especially for B2C e-commerce sites where visuals drive sales, and for B2B SaaS platforms needing reliable, professional UIs. This AI Agent automates the traditionally tedious and manual process of visual regression testing.

This AI Agent orchestrates a two-part process: first, it generates and stores baseline screenshots of your specified web pages. Then, on a schedule or manually, it captures fresh screenshots and employs Google Gemini's advanced vision capabilities to intelligently compare them against the baselines. It meticulously identifies and reports visual discrepancies—such as changes in text, imagery, color, or layout—before they impact your users, ensuring your digital experiences remain flawless.

Key Features & Benefits

• AI-Powered Visual Comparison: Leverages Google Gemini's vision model to accurately identify visual differences (e.g., text content, image alterations, layout shifts, color deviations, element positioning) between website versions.
• Automated Screenshot Lifecycle: Manages the generation of new screenshots via Apify.com and retrieval of baseline images from Google Drive.
• Structured Change Detection: Delivers detailed, structured JSON output of detected visual changes, making it easy to review and act upon identified regressions like 'text', 'image', 'color', or 'position' changes.
• Integrated Issue Reporting: Automatically creates issues in Linear (easily adaptable for Jira, Slack, or other project management tools) for detected visual regressions, streamlining your bug tracking and resolution workflow.
• Flexible Execution: Supports both scheduled automated runs for continuous monitoring and manual triggers for on-demand testing or base image updates.
• Boosts Efficiency: Frees up valuable developer and QA time by automating a repetitive and error-prone task.
• Proactive Quality Control: Catches UI bugs and inconsistencies early in the development or post-deployment cycle, safeguarding user experience and brand reputation.

• An n8n instance (Cloud or self-hosted).
• Google Gemini API Key (accessible via Google AI Studio or a Google Cloud Project with the Vertex AI API enabled).
• Google Drive & Google Sheets credentials (OAuth2 configured in n8n).
• An Apify.com account and API token (a free tier with credits is often available).
• Linear API credentials (if using Linear for issue reporting; otherwise, credentials for your chosen reporting tool like Jira or Slack).

1. Download the n8n workflow JSON file.
2. Import the workflow into your n8n instance.
3. Part A - Base Image Generation Setup (Run this part first to establish your baseline screenshots): a. Configure the 'Get URLs with Missing Base Images' (Google Sheets) node: Connect your Google Sheets account and specify the Spreadsheet ID and Sheet Name. Your sheet should list URLs to test (e.g., in a column named 'url') and have a column for base image Drive IDs (e.g., 'base'). b. Configure the 'Run Webpage Screenshot' (HTTP Request using Apify) node: Under Authentication, select 'Generic Credential Type', then 'HTTP Query Auth'. Add your Apify API token as a credential. c. Configure the 'Upload to Drive' (Google Drive) node: Connect your Google Drive account and specify the target folder for storing base screenshots. d. Configure the 'Update Base Image' (Google Sheets) node: Ensure it correctly maps the uploaded Google Drive file ID back to the 'base' column for the corresponding URL in your sheet. e. Manually trigger the workflow starting from the 'When clicking ‘Test workflow’' node to generate and store your initial set of base images.
4. Part B - Visual Regression Test Setup (Automated comparison and reporting): a. Configure the 'Schedule Trigger' node to define how often you want the visual tests to run (e.g., daily, weekly, after deployments). Alternatively, you can trigger this part manually. b. Verify the 'Get Webpages List' (Google Sheets) node is correctly fetching all URLs and their associated base image Drive IDs from your sheet. c. Ensure the 'Base Image' (Google Drive) node is correctly configured to download the base screenshots using the IDs from Google Sheets. d. Confirm the 'Run Webpage Screenshot1' (HTTP Request using Apify) node (for new screenshots) is configured with your Apify API token, similar to step 3b. e. Navigate to the 'Visual Regression Agent' (LLM Chain) node. Inside it, configure the 'Google Gemini Chat Model' sub-node with your Google Gemini API Key. f. (Optional) Review and customize the system prompt within the 'Visual Regression Agent' node if you need to adjust the comparison instructions for Gemini. g. Configure the 'Create Report' (Linear) node with your Linear API credentials and specify the target team/project. If you prefer Jira, Slack, or another tool, replace or modify this node accordingly.
5. Activate the workflow. Part B will now run according to your schedule or manual triggers, comparing new screenshots against your established baselines.