Automate Visual Regression Testing with AI to Prevent UI Errors

AI-Powered Visual Regression Testing

Manually checking websites for unexpected visual changes is tedious and error-prone. This n8n workflow leverages the power of AI vision models to automate visual regression testing, ensuring your website's UI and UX remain consistent and flawless across all deployments.

Key Features

• AI-Driven Visual Comparison: Utilizes Google Gemini's advanced vision capabilities to accurately identify subtle UI, text, image, color, and layout regressions between current and base screenshots.
• Automated Screenshot Generation: Seamlessly captures current webpage screenshots using Apify, a reliable third-party web scraping service.
• Centralized URL Management: Effortlessly manage your list of monitored webpages and their corresponding base image references within a Google Sheet.
• Proactive Issue Reporting: Automatically creates detailed reports and issues in Linear.app (or your preferred project management tool) when visual changes are detected.
• Scheduled Automation: Configure the workflow to run visual regression tests on a schedule, ensuring continuous monitoring without manual intervention.

How It Works

This workflow is ingeniously split into two core parts. Part A is dedicated to establishing your baseline by generating and storing initial "golden" screenshots of your webpages. Part B then takes over, running automated tests against these baselines, comparing new screenshots with the AI vision model, and reporting any discrepancies.

Part A: Generate Base Images

Before performing any visual regression tests, we need a set of base screenshots to compare against. This initial part of the workflow uses an external website screenshotting service, Apify.com, to achieve this. You'll typically run this section only when you need to update your baseline images.

1. Get List of Webpages to Generate Base Images

The workflow begins by retrieving a list of webpages from a designated Google Sheet. This sheet serves as your central repository, holding all the URLs you wish to monitor and their associated base screenshot references.

2. Generate Webpage Screenshot via Apify

For each webpage in your list, the workflow interacts with Apify.com, a powerful web scraping SaaS, to generate a high-quality screenshot. Apify's dedicated webpage screenshot actor ensures consistent and accurate image capture.

3. Upload Screenshot to Google Drive

Once a screenshot is generated by Apify, it's downloaded and securely uploaded to your Google Drive. Crucially, the workflow then updates your Google Sheet with the new Google Drive ID for each image, allowing for easy referencing during future regression tests.

Part B: Run Visual Regression Test

With your base images established, Part B of the workflow kicks in to actively monitor for visual regressions. This section is designed to run automatically on a schedule, performing ongoing checks for unexpected changes.

4. Trigger Visual Regression Test Run

The visual regression test can be triggered manually or, more efficiently, on a recurring schedule using n8n's Schedule Trigger node. It begins by fetching the latest list of webpages to be tested from your Google Sheet.

5. Download Base and Generate new Webpage Screenshot

For each webpage, the workflow performs two simultaneous actions: it downloads the existing base screenshot from Google Drive and generates a fresh, current screenshot of the webpage using Apify.com.

6. Compare Screenshots using Vision Model

The heart of the visual regression test lies here. Both the base and the new screenshots are sent to an AI vision model (Google Gemini in this case) for comparison. A structured output parser ensures the AI's analysis of any visual differences is returned in a clean, JSON format for subsequent processing.

7. Create Report In Linear

Finally, any detected changes are aggregated, formatted into a clear markdown snippet, and used to automatically create a new issue or report in Linear.app. This provides your team with immediate, actionable insights into any UI regressions, allowing for swift resolution.