What This Workflow Does
This workflow checks if websites look different from one week to next by taking two pictures and comparing them using an AI.
It finds differences in text, pictures, colors, and layout changes.
Then it puts all found changes in an issue tracking tool for fixing.
This saves time and avoids human mistakes in checking website look after updates.
Who Should Use This Workflow
If you check visual website changes often and spend too much time on it, this workflow is for you.
It helps teams who want fast and correct results when confirming no visual bugs reach their users.
Tools and Services Used
- Google Sheets: Holds list of webpages and image links.
- Google Drive: Stores the screenshots safely.
- Apify.com: Takes webpage screenshots automatically.
- Google Gemini (PaLM) API: Uses AI to spot visual differences in screenshots.
- Linear.app: Creates issues for developers to fix found problems.
- n8n Automation Platform: Runs all steps in one workflow.
Inputs, Processing Steps, and Output
Inputs:
- Google Sheets webpage list with URLs and old screenshot references.
- API keys for Apify, Google services, Linear, and Google Gemini.
Processing Steps:
- Pull URLs from Google Sheets.
- Take baseline screenshots of each webpage using Apify API.
- Download baseline images and upload them to Google Drive.
- Update Google Sheets with new Google Drive file IDs.
- Schedule weekly runs.
- Take new screenshots each week using Apify.
- Download new screenshots temporarily.
- Match baseline and new images per URL.
- Send paired images to Google Gemini AI for visual difference detection.
- Parse AI results to identify exact changed parts and descriptions.
- Filter out pages without changes.
- Group all detected changes in one dataset.
- Create a detailed issue in Linear.app with found visual bugs.
Output:
An issue report listing all visual differences per tested webpage.
It helps developers quickly see and fix UI problems.
Beginner Step-by-Step: How to Use This Workflow in n8n
Step 1: Import Workflow
- Download the workflow file using the Download button on this page.
- Open n8n editor.
- Use the Import from File option to upload the workflow file.
Step 2: Configure Credentials
- Add API keys and login details for Google Sheets, Google Drive, Apify, Google Gemini, and Linear into n8n credentials.
- Make sure the credentials have proper access to needed services.
Step 3: Update IDs and Details
- Check and replace any Google Drive folder IDs, Google Sheets document URLs, Linear workspace IDs, or emails to your own.
- Copy paste prompt text for the AI node from workflow description if needed.
Step 4: Test the Workflow
- Run the workflow once manually inside n8n editor to check for errors.
- Fix any credential or permission errors that occur.
Step 5: Activate for Production
- Turn on the Schedule Trigger node to start weekly automatic runs.
- Monitor executions for any issues and set notifications as needed.
- If using self hosting n8n, see self-host n8n for help.
Customization Ideas
- Change screenshot service by updating Apify API node to other providers.
- Replace Google Gemini AI node with other vision models supported by Langchain if preferred.
- Switch Linear issue creation to JIRA or Slack messages depending on team tools.
- Modify schedule trigger timing for daily, monthly, or custom test intervals.
Common Problems and Fixes
- API rate limit error: Happens if Apify API gets too many rapid requests.
Fix: Add delay node or get higher API plan. - Google Sheets update fails: Happens if Google credentials lack permission.
Fix: Re-login Google accounts and check folder plus sheet permissions. - AI output empty or invalid: Occurs when AI prompt or output format is wrong.
Fix: Adjust AI prompt and JSON schema, test with sample images.
Pre-Production Checklist
- Confirm Google Sheets has URLs and old image IDs filled.
- Validate all API credentials and permissions are correct.
- Test Apify screenshot calls in HTTP Request nodes manually.
- Run single workflow execution to check image saving and Google Sheets update.
- Review AI response format with some test images to ensure correct parsing.
Summary of Workflow Benefits and Outcome
✓ Automates visual testing of multiple client websites weekly.
✓ Saves about 6+ hours of manual checking every week.
✓ Detects detailed changes in text, images, colors, and layout.
✓ Creates clear issue reports for developers to act quickly.
✓ Improves QA accuracy by reducing human errors.
✓ Integrates Google Sheets, Drive, Apify, Google Gemini AI, Linear, within n8n.
→ Provides a ready-to-go visual regression testing automation system.