Instant visual regression testing
Chrome Extension · Freeware · Serverless · Privacy-first
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.
| 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
| 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 |
| ⚡ 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 |
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) |
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
No cloud account needed — share files however your team prefers (Slack, email, Git, shared drive).
| 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 | 🟡 Import/export | 🟢 Cloud dashboard | 🟡 Git | 🟡 Git |
✅ 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
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
| 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 |
Install directly from the Chrome Web Store.
- Download
comparador-*.zipfrom Releases - Extract the ZIP file
- Open
chrome://extensions/ - Enable Developer mode (toggle in top-right)
- Click Load unpacked and select the extracted folder
| 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.
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 startEnvironments:dev.acme.local, stage.acme.local, www.acme.local
Using with Comparador:
- Create a new project (e.g., "Acme")
- Uncomment environments and paths in Variables
- Go to Manage → select project → Setup → Generate Preview → Apply Changes
- Capture pages and compare across environments
New projects come pre-configured for mock server — serves as a reference for real-world setup.
- Krystian Panek — Founder & Maintainer — krystian.panek@vml.com
- Tomasz Sobczyk — Consultancy — tomasz.sobczyk@vml.com