What This Workflow Does
This workflow helps you find changes on websites automatically by comparing old and new screenshots. It saves time spent on taking and checking screenshots manually and finds visual differences like moved text, changed colors, or replaced images. The result is a clear list of detected issues sent to your project management tool.
Who Should Use This Workflow
If you manage many websites and must check if they look right after updates, this workflow fits your needs. It’s especially useful for quality assurance testers who want to avoid missing mistakes caused by design or content changes.
It works well for teams using Google Sheets to keep track of websites, Google Drive for storing images, Apify to get website snapshots, and Google Gemini AI to spot visual changes automatically.
Key Tools and Services Used
- Google Sheets: Holds URLs of webpages and stores base screenshot file IDs.
- Google Drive: Saves old and new screenshots as image files.
- Apify API: Generates fresh screenshots of webpages.
- Google Gemini (PaLM) AI: Compares images to find visual differences.
- Linear: Manages issue tickets for detected problems.
How the Workflow Works: Inputs, Processing, and Outputs
Inputs
- List of website URLs and base image file IDs from Google Sheets.
- Existing baseline screenshots in Google Drive.
Processing Steps
- Fetch URLs and base image IDs from Google Sheets.
- Download base screenshots from Google Drive.
- Request new screenshots from Apify API.
- Download new screenshots.
- Upload new screenshots to Google Drive and update Google Sheets with new file IDs.
- Combine old and new screenshots to prepare for AI analysis.
- Send images to Google Gemini AI to detect visual differences such as text changes, moved elements, or color shifts.
- Parse AI’s report into JSON format showing detailed change descriptions.
- Filter out pages with no changes.
- Group all detected changes.
- Create comprehensive issue reports with details inside Linear for team tracking.
Outputs
- Automated visual difference reports listed by webpage.
- New baseline screenshots updated in Google Drive and Google Sheets for next testing run.
- Issues created inside Linear with summaries and detailed descriptions.
Beginner Step-by-Step: How to Use This Workflow in n8n
1. Import the Workflow
- Download the workflow file using the Download button on this page.
- Open n8n editor and use the Import from File option to load the workflow.
2. Configure Credentials
- Add API keys and OAuth credentials for Google Sheets, Google Drive, Apify, Google Gemini, and Linear.
- Check each node’s credential settings to ensure proper authentication.
3. Update IDs and Settings
- Verify or change Google Sheets Spreadsheet ID and Sheet name if needed.
- Update Google Drive folder IDs where screenshots are stored.
- Make sure URL and base image file ID columns match your sheet structure.
- Adjust API request bodies if you want different screenshot settings (size, format).
- In Linear node, set project ID or team channel where issues should be created.
4. Test and Activate
- Run the workflow manually from the Manual Trigger node to check execution.
- Confirm screenshots are generated, compared, and that change issues appear in Linear.
- When satisfied, activate the workflow using the activation switch to run automatically on schedule.
For long term control or to avoid API limits, consider self-host n8n for running this workflow securely.
Edge Cases and Common Failures
- Base image missing or wrong file ID: Google Drive download fails. Fix by verifying correct IDs in Google Sheets.
- Apify screenshot fails: Possible API key issues, rate limits, or invalid URLs. Check API keys and URL validity.
- Google Gemini outputs unclear results: Check AI prompt and output parser schema to ensure they match expected format.
- Large batch sizes: Can cause API rate limits. Reduce batch size or switch to self-hosted n8n.
Customization Ideas
- Replace Linear node with Slack or JIRA nodes to send alerts or create tickets in other systems.
- Change Apify screenshot settings like delay, resolution, or image format by editing JSON body in HTTP nodes.
- Swap Google Gemini node to other large vision models such as OpenAI GPT-4 Vision or Anthropic Claude Vision.
- Modify batch sizes in SplitInBatches node to adjust processing speed according to quota.
- Add Gmail node to email summary reports after Linear issues creation.
Summary and Result
✓ This workflow saves about 8 hours a week by automating visual checks of websites.
✓ It finds visual defects like layout shifts, text or color changes automatically.
✓ Changes are documented clearly and tracked in Linear for prompt fixes.
→ Users get reliable visual testing without manual screenshot work.
→ Updated baseline images keep tests accurate over time.