Instant visual regression testing
Chrome Extension · Freeware · Serverless · Privacy-first

_{Proudly sponsored by:}

---

What is Comparador?

Comparador is a Chrome Extension for on-demand visual regression testing — compare web pages across environments, track changes over time, debug deployment issues.

Install → Capture → Compare.
No pipelines. No accounts. No external servers.

Why Comparador?

Traditional VRT Tools	Comparador
🔧 Require CI/CD integration	✅ Works standalone
📁 Rigid baseline workflow	✅ Baselines + ad-hoc comparison
☁️ SaaS with accounts	✅ Runs entirely in browser
⏳ Complex setup	✅ Install and go

Use cases:

• Did deployment break anything?
• Is staging identical to production?
• What exactly changed — layout, HTML, headers, console logs, performance?
• Track visual changes over time

---

Key Features

Feature	Description
📸 Visual Diff	Full-page screenshots with pixel-level comparison, mismatch %, multiple view modes
📄 HTML Diff	Side-by-side source comparison with syntax highlighting
📋 Headers Diff	Compare response headers (cache, CDN, security)
🪵 Logs Diff	Compare console logs and browser messages — spot new errors, warnings, count changes
📊 Metrics Diff	Compare performance metrics (TTFB, DOM load, resources) with threshold-based verdicts
✅ Baselines	Accept/reject workflow, auto + manual baseline pinning, compare any two captures
🔄 Auto Compare	Automatic comparison against baselines after capture, configurable thresholds, auto-accept
🚀 Batch Capture	Capture projects or groups of URLs, compare across environments
🤝 Team Sync	Share project setup with your team — export/import files, or auto-sync via Git/GitHub, no account needed
⚡ Popup	Quick environment switching + fast access to frequently tested pages
📖 Built-in Help	Guides on baselines, scripting, keyboard shortcuts, and more — right inside the extension

🔧 Scriptable & Extensible

GUI provides sensible defaults. Power users can script everything:

Script	Purpose
Browser Script	Auth headers, cookies, blocked URLs, user-agent
Page Script	Hide cookie banners, wait for animations
Compare Script	Normalize HTML/headers/logs/metrics before comparison
Navigation Script	Custom environment switcher in popup
Setup Script	Auto-generate URLs (envs × paths matrix, sitemap, API)

🤝 Team Collaboration

Share project configurations and test data with your team via import/export:

• Export a project (URLs, settings, scripts) as a portable JSON file
• Import on another machine — same setup, zero manual work
• Backup & restore full project data including captures and screenshots — compressed exports with large project support
• Exports exclude sensitive values (sync credentials) by default — opt in per export if you really need them included

No cloud account needed — share files however your team prefers (Slack, email, Git, shared drive).

🔄 Project Sync

Keep a project's configuration (URLs, settings, scripts, variables) in sync with your team automatically, instead of manually exporting/importing files:

• GitHub — sync directly to a repository via the GitHub API
• Git (any remote) — Bitbucket, GitLab, Gitea, or any self-hosted server over HTTPS
• Filesystem — read/write a local or shared folder (pair with your own VCS workflow)

Push and pull explicitly whenever you want, or set a Pull mode (manual, always, or every 5/15/60 minutes) so Comparador checks for remote changes on its own and keeps you in sync. Nothing is sent anywhere unless you configure a provider yourself.

---

Comparador vs Alternatives

Feature	Comparador	Percy / Chromatic	BackstopJS	Playwright VRT
Setup time	🟢 Minutes	🟡 Hours	🟡 Hours	🔴 Days
Infrastructure required	🟢 Chrome only	🔴 SaaS	🟡 Node.js	🟡 CI/CD
Account required	🟢 No	🔴 Yes	🟢 No	🟢 No
Works offline	🟢 Yes	🔴 No	🟢 Yes	🟢 Yes
Ad-hoc comparisons	🟢 Any two captures	🔴 Baseline only	🔴 Baseline only	🔴 Baseline only
Flexible baselines	🟢 Capture + URL	🟡 Build-level	🟡 CLI update	🟡 CLI update
Beyond screenshots	🟢 HTML + headers + logs + metrics	🔴 Screenshots only	🔴 Screenshots only	🔴 Screenshots only
Auth / cookies scripting	🟢 Yes	🟡 Config	🟡 Config	🟢 Yes
CI/CD integration	🔴 No	🟢 Yes	🟢 Yes	🟢 Yes
Team collaboration	🟢 Git/GitHub sync	🟢 Cloud dashboard	🟡 Git	🟡 Git

When to use Comparador

✅ Best for:

• QA engineers doing manual exploratory testing
• Developers debugging production issues
• Quick "before/after" deployment checks
• Comparing staging vs production
• Teams without CI/CD pipeline access
• Privacy-sensitive projects (data stays local)

❌ Not ideal for:

• Fully automated CI/CD visual regression
• Large teams needing shared baselines
• Hundreds of pages requiring scheduled runs

Complementary usage

Comparador works alongside CI/CD tools. Use it for:

• Ad-hoc debugging when CI catches a diff
• Testing environments not in your pipeline
• Quick checks before committing
• Investigating customer-reported visual issues

---

Screenshots

Organize URLs	Capture Pages
Projects, groups, URLs	Batch capture with progress

Review Captures	Compare: Side by Side
Accept or reject captures and attempts	Differences highlighted in pink

Compare: Swipe View	Compare: Accepted
Drag the red line to reveal changes	Approved baseline with visual diff

HTML Diff	Response Headers Diff
Side-by-side source comparison	Compare cache, CDN, security headers

Scripts	Settings
Browser, page, setup, navigation	Per-project configuration

Popup	Help
Quick capture & environment switch	Keyboard shortcuts & documentation

---

Installation

Chrome Web Store (Recommended)

Install directly from the Chrome Web Store.

From Release (Manual)

1. Download comparador-*.zip from Releases
2. Extract the ZIP file
3. Open chrome://extensions/
4. Enable Developer mode (toggle in top-right)
5. Click Load unpacked and select the extracted folder

---

Permissions

Permission	Purpose
activeTab	Access current tab to capture URL and content
tabs	Create/manage tabs for batch capture
debugger	Chrome DevTools Protocol for full-page screenshots and HTML extraction
webRequest	Intercept response headers for comparison
offscreen	Run user-configured compare scripts in an isolated sandbox. Chrome's Content Security Policy prevents dynamic script evaluation in extension pages and service workers; the offscreen document provides a CSP-sandboxed iframe where compare scripts safely preprocess captured HTML and response headers before comparison. Only created when automatic comparison runs after a capture.
host_permissions	Capture pages from any website

Privacy: All data stored locally. Nothing sent to external servers. See PRIVACY_POLICY.md.

---

Known Issues

Screenshots differ across machines — by design, not a defect

Cross-machine visual parity is a famously hard, arguably unsolved problem across the whole VRT space — browser versions, OS versions, GPUs, monitors, and font rendering all shift constantly. Even purpose-built cross-platform tools that go to great lengths to control these variables (e.g. Percy, rendering on managed cloud browsers) still ship with known gaps — Percy serializes the DOM at the moment prefers-reduced-motion kicks in, but the actual re-render still runs live, a mismatch by design rather than an oversight.

Comparador deliberately does not try to solve cross-machine parity. It's built for ad-hoc capture + compare on one machine, not as a universal cross-platform diffing engine — the signal that matters is the delta that's meaningful right now, on this device, not a full cross-environment rendering matrix. In practice: capture and compare on hardware close to your actual end users, so you're testing what has business value rather than chasing edge cases that only satisfy a developer's sense of "complete" coverage. That's a deliberate scope boundary, not a limitation Comparador is trying to work around.

Popup takes several seconds (or doesn't open) on macOS

If the toolbar popup takes anywhere from a few seconds up to ~60s to appear — or doesn't render at all — after Chrome has been idle for a while, this is a confirmed Chrome bug on macOS, not a Comparador issue. It affects every extension with a popup: reproducible even with a 3-line test extension that has no permissions and no service worker. Root cause: Chrome loads the popup's renderer at background process priority until its first paint completes, which gets throttled hard on Apple Silicon.

Tracked upstream: crbug.com/549552319.

Confirmed workaround — launch Chrome with a feature flag:

open -na "Google Chrome" --args --enable-features=PMLoadingPageVoter --restore-last-session

Wrap it in an Automator app for a one-click launcher if you don't want to use the terminal each time.

Anecdotally, opening any other extension page (e.g. Options) first, then the popup, also seems to help — plausibly because it forces an already-warm, foregrounded renderer process to be reused. Take that with a grain of salt: the bug thread itself notes that symptom severity swings a lot hour-to-hour on affected machines, so a "fix" that seems to work today may not tomorrow. The flag above is the only change actually confirmed to eliminate the delay.

---

Mock Server

Local HTTPS mock server for testing Comparador.

cd mock
npm install
npm run setup   # One-time: generate certs, add hosts, trust CA (requires sudo)
npm start

Environments: dev.acme.local, stage.acme.local, www.acme.local

Using with Comparador:

1. Create a new project (e.g., "Acme")
2. Uncomment environments and paths in Variables
3. Go to Manage → select project → Setup → Generate Preview → Apply Changes
4. Capture pages and compare across environments

New projects come pre-configured for mock server — serves as a reference for real-world setup.

---

Authors

• Krystian Panek — Founder & Maintainer — krystian.panek@vml.com
• Tomasz Sobczyk — Consultancy — tomasz.sobczyk@vml.com

---

License

• Extension: Freeware
• This repo: MIT