Automated Visual Regression Testing with AI
detail.loadingPreview
Streamline your web development workflow with an automated visual regression testing solution. This n8n workflow leverages AI to compare website screenshots, detect visual changes, and report them directly to your issue tracker, ensuring a consistent user experience.
About This Workflow
This n8n workflow automates the critical process of visual regression testing, ensuring your website's user interface remains consistent across deployments. It begins by downloading existing base screenshots from Google Drive. Then, it regenerates new screenshots of the same web pages using an external service. The core of the automation lies in sending both the base and new screenshots to a powerful AI vision model, specifically Google Gemini, to perform a pixel-by-pixel comparison. A structured output parser then formats the AI's findings into a usable JSON, detailing any detected visual discrepancies. Finally, the workflow filters out pages with no changes and aggregates the identified visual regressions into a comprehensive report, creating new issues in Linear.app for immediate review and action. This end-to-end automation significantly reduces manual testing effort and accelerates the identification of UI bugs.
Key Features
- Automated Screenshot Comparison: Utilizes AI to intelligently compare base and current website screenshots.
- AI-Powered Vision Model: Leverages Google Gemini for robust visual difference detection.
- Dynamic Reporting: Generates detailed reports of visual changes.
- Seamless Issue Tracking Integration: Automatically creates issues in Linear.app (or similar tools) for identified regressions.
- Configurable Base Image Management: Easily update base images stored in Google Drive.
How To Use
- Configure Google Drive Credentials: Ensure your n8n instance is connected to your Google Drive account to access and store base images.
- Set Up Base Image Storage: Upload your initial set of base screenshots to a designated folder in Google Drive (e.g., 'base_images') and note the folder ID.
- Integrate External Screenshot Service: Configure the workflow to use a service like Apify.com for generating new webpage screenshots, providing the necessary API keys or credentials.
- Connect Google Gemini API: Authenticate your n8n instance with your Google Cloud account to utilize the Google Gemini API for visual analysis.
- Define Output Schema: Configure the 'Structured Output Parser' node with a JSON schema that accurately captures the desired output from the AI model (e.g., type of change, descriptions, previous/current states).
- Configure Issue Tracker Integration: Set up the Linear.app node (or substitute with Jira, Slack, etc.) by providing your API key and defining how the markdown report should be formatted.
- Map and Execute: Connect the nodes in your n8n workflow, ensuring the data flows correctly between screenshot downloading, AI comparison, and report generation. Execute the workflow to perform visual regression tests.
Apps Used
Workflow JSON
{
"id": "dd7b08be-6d13-4c27-9394-f3958323f611",
"name": "Automated Visual Regression Testing with AI",
"nodes": 18,
"category": "DevOps",
"status": "active",
"version": "1.0.0"
}Note: This is a sample preview. The full workflow JSON contains node configurations, credentials placeholders, and execution logic.
Get This Workflow
ID: dd7b08be-6d13...
About the Author
AI_Workflow_Bot
LLM Specialist
Building complex chains with OpenAI, Claude, and LangChain.
Statistics
Related Workflows
Discover more workflows you might like
Automated PR Merged QA Notifications
Streamline your QA process with this automated workflow that notifies your team upon successful Pull Request merges. Leverage AI and vector stores to enrich notifications and ensure seamless integration into your development pipeline.
Automate Qualys Report Generation and Retrieval
Streamline your Qualys security reporting by automating the generation and retrieval of reports. This workflow ensures timely access to crucial security data without manual intervention.
Visualize Your n8n Workflows: Interactive Dashboard with Mermaid.js
Gain unparalleled visibility into your n8n automation landscape. This workflow transforms your n8n instance into a dynamic, interactive dashboard, leveraging Mermaid.js to visualize all your workflows in one accessible place.