{"id":45208054,"url":"https://github.com/wttech/comparador","last_synced_at":"2026-04-17T07:01:11.355Z","repository":{"id":334192169,"uuid":"1139649878","full_name":"wttech/comparador","owner":"wttech","description":"Instant visual regression testing","archived":false,"fork":false,"pushed_at":"2026-04-09T07:07:20.000Z","size":31364,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-09T09:11:02.863Z","etag":null,"topics":["comparison-tool","regression-testing","screenshot-testing","test-automation","testing","visual-comparison-testing","visual-regression","visual-regression-testing","visual-regression-tests"],"latest_commit_sha":null,"homepage":"https://chromewebstore.google.com/detail/ocfpngpgnhjcpnolhjkpfanhgoalbbhd","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wttech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-22T08:30:47.000Z","updated_at":"2026-04-09T07:07:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/wttech/comparador","commit_stats":null,"previous_names":["wttech/comparador"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/wttech/comparador","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wttech%2Fcomparador","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wttech%2Fcomparador/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wttech%2Fcomparador/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wttech%2Fcomparador/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wttech","download_url":"https://codeload.github.com/wttech/comparador/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wttech%2Fcomparador/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31918838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comparison-tool","regression-testing","screenshot-testing","test-automation","testing","visual-comparison-testing","visual-regression","visual-regression-testing","visual-regression-tests"],"created_at":"2026-02-20T16:03:32.964Z","updated_at":"2026-04-17T07:01:11.349Z","avatar_url":"https://github.com/wttech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/logo.png\" width=\"640\" alt=\"Comparador\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eInstant visual regression testing\u003c/strong\u003e\u003cbr\u003e\n  Chrome Extension · Freeware · Serverless · Privacy-first\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://chromewebstore.google.com/detail/ocfpngpgnhjcpnolhjkpfanhgoalbbhd\"\u003e\u003cimg src=\"https://img.shields.io/badge/Install_for_Free-4285F4?style=for-the-badge\u0026logo=googlechrome\u0026logoColor=white\" alt=\"Install from Chrome Web Store\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://chromewebstore.google.com/detail/ocfpngpgnhjcpnolhjkpfanhgoalbbhd\"\u003e\u003cimg src=\"https://img.shields.io/chrome-web-store/v/ocfpngpgnhjcpnolhjkpfanhgoalbbhd?label=Chrome%20Web%20Store\" alt=\"Chrome Web Store\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## What is Comparador?\n\nComparador is a Chrome Extension for **on-demand visual regression testing** — compare web pages across environments, track changes over time, debug deployment issues.\n\n**Install → Capture → Compare.**  \nNo pipelines. No accounts. No external servers.\n\n### Why Comparador?\n\n| Traditional VRT Tools       | Comparador                      |\n| --------------------------- | ------------------------------- |\n| 🔧 Require CI/CD integration | ✅ Works standalone              |\n| 📁 Rigid baseline workflow   | ✅ Baselines + ad-hoc comparison |\n| ☁️ SaaS with accounts        | ✅ Runs entirely in browser      |\n| ⏳ Complex setup             | ✅ Install and go                |\n\n**Use cases:**\n- Did deployment break anything?\n- Is staging identical to production?\n- What exactly changed — layout, HTML, headers, console logs, performance?\n- Track visual changes over time\n\n---\n\n## Key Features\n\n| Feature             | Description                                                                                |\n| ------------------- | ------------------------------------------------------------------------------------------ |\n| 📸 **Visual Diff**   | Full-page screenshots with pixel-level comparison, mismatch %, multiple view modes         |\n| 📄 **HTML Diff**     | Side-by-side source comparison with syntax highlighting                                    |\n| 📋 **Headers Diff**  | Compare response headers (cache, CDN, security)                                            |\n| 🪵 **Logs Diff**     | Compare console logs and browser messages — spot new errors, warnings, count changes       |\n| 📊 **Metrics Diff**  | Compare performance metrics (TTFB, DOM load, resources) with threshold-based verdicts      |\n| ✅ **Baselines**     | Accept/reject workflow, auto + manual baseline pinning, compare any two captures           |\n| 🔄 **Auto Compare**  | Automatic comparison against baselines after capture, configurable thresholds, auto-accept |\n| 🚀 **Batch Capture** | Capture projects or groups of URLs, compare across environments                            |\n| ⚡ **Popup**         | Quick environment switching + fast access to frequently tested pages                       |\n| 📖 **Built-in Help** | Guides on baselines, scripting, keyboard shortcuts, and more — right inside the extension  |\n\n### 🔧 Scriptable \u0026 Extensible\n\nGUI provides sensible defaults. Power users can script everything:\n\n| Script                | Purpose                                                          |\n| --------------------- | ---------------------------------------------------------------- |\n| **Browser Script**    | Auth headers, cookies, blocked URLs, user-agent                  |\n| **Page Script**       | Hide cookie banners, wait for animations                         |\n| **Compare Script**    | Normalize HTML/headers/logs/metrics before comparison                     |\n| **Navigation Script** | Custom environment switcher in popup                             |\n| **Setup Script**      | Auto-generate URLs (envs × paths matrix, sitemap, API)           |\n\n### 🤝 Team Collaboration\n\nShare project configurations and test data with your team via **import/export**:\n\n- **Export** a project (URLs, settings, scripts) as a portable JSON file\n- **Import** on another machine — same setup, zero manual work\n- **Backup \u0026 restore** full project data including captures and screenshots — compressed exports with large project support\n\nNo cloud account needed — share files however your team prefers (Slack, email, Git, shared drive).\n\n---\n\n## Comparador vs Alternatives\n\n| Feature                      | Comparador         | Percy / Chromatic  | BackstopJS         | Playwright VRT     |\n| ---------------------------- | ------------------ | ------------------ | ------------------ | ------------------ |\n| **Setup time**               | 🟢 Minutes          | 🟡 Hours            | 🟡 Hours            | 🔴 Days             |\n| **Infrastructure required**  | 🟢 Chrome only      | 🔴 SaaS             | 🟡 Node.js          | 🟡 CI/CD            |\n| **Account required**         | 🟢 No               | 🔴 Yes              | 🟢 No               | 🟢 No               |\n| **Works offline**            | 🟢 Yes              | 🔴 No               | 🟢 Yes              | 🟢 Yes              |\n| **Ad-hoc comparisons**       | 🟢 Any two captures | 🔴 Baseline only    | 🔴 Baseline only    | 🔴 Baseline only    |\n| **Flexible baselines**       | 🟢 Capture + URL    | 🟡 Build-level      | 🟡 CLI update       | 🟡 CLI update       |\n| **Beyond screenshots**       | 🟢 HTML + headers + logs + metrics | 🔴 Screenshots only | 🔴 Screenshots only | 🔴 Screenshots only |\n| **Auth / cookies scripting** | 🟢 Yes              | 🟡 Config           | 🟡 Config           | 🟢 Yes              |\n| **CI/CD integration**        | 🔴 No               | 🟢 Yes              | 🟢 Yes              | 🟢 Yes              |\n| **Team collaboration**       | 🟡 Import/export    | 🟢 Cloud dashboard  | 🟡 Git              | 🟡 Git              |\n\n### When to use Comparador\n\n✅ **Best for:**\n- QA engineers doing manual exploratory testing\n- Developers debugging production issues\n- Quick \"before/after\" deployment checks\n- Comparing staging vs production\n- Teams without CI/CD pipeline access\n- Privacy-sensitive projects (data stays local)\n\n❌ **Not ideal for:**\n- Fully automated CI/CD visual regression\n- Large teams needing shared baselines\n- Hundreds of pages requiring scheduled runs\n\n### Complementary usage\n\nComparador works alongside CI/CD tools. Use it for:\n- Ad-hoc debugging when CI catches a diff\n- Testing environments not in your pipeline\n- Quick checks before committing\n- Investigating customer-reported visual issues\n\n---\n\n## Screenshots\n\n|                       Organize URLs                       |                   Capture Pages                    |\n| :-------------------------------------------------------: | :------------------------------------------------: |\n| ![Dashboard](assets/screenshots/organize-0-dashboard.png) | ![Capture](assets/screenshots/capture-pages-1.png) |\n|                  Projects, groups, URLs                   |            Batch capture with progress             |\n\n|              Review Captures               |                      Compare: Side by Side                      |\n| :----------------------------------------: | :-------------------------------------------------------------: |\n| ![Review](assets/screenshots/review-1.png) | ![Side by Side](assets/screenshots/compare-2-screenshots-1.png) |\n|   Accept or reject captures and attempts   |                 Differences highlighted in pink                 |\n\n|                   Compare: Swipe View                    |                    Compare: Accepted                     |\n| :------------------------------------------------------: | :------------------------------------------------------: |\n| ![Swipe](assets/screenshots/compare-2-screenshots-2.png) | ![Accepted](assets/screenshots/compare-5-accepted-1.png) |\n|           Drag the red line to reveal changes            |            Approved baseline with visual diff            |\n\n|                      HTML Diff                      |                     Response Headers Diff                     |\n| :-------------------------------------------------: | :-----------------------------------------------------------: |\n| ![HTML Diff](assets/screenshots/compare-3-html.png) | ![Headers](assets/screenshots/compare-4-response-headers.png) |\n|           Side-by-side source comparison            |             Compare cache, CDN, security headers              |\n\n|                        Scripts                         |                        Settings                         |\n| :----------------------------------------------------: | :-----------------------------------------------------: |\n| ![Scripts](assets/screenshots/customize-3-scripts.png) | ![Settings](assets/screenshots/customize-1-project.png) |\n|            Browser, page, setup, navigation            |                Per-project configuration                |\n\n|                        Popup                        |                  Help                  |\n| :-------------------------------------------------: | :------------------------------------: |\n| ![Popup](assets/screenshots/popup-1-navigation.png) | ![Help](assets/screenshots/help-1.png) |\n|         Quick capture \u0026 environment switch          |   Keyboard shortcuts \u0026 documentation   |\n\n---\n\n## Installation\n\n### Chrome Web Store (Recommended)\n\nInstall directly from the [Chrome Web Store](https://chromewebstore.google.com/detail/ocfpngpgnhjcpnolhjkpfanhgoalbbhd).\n\n### From Release (Manual)\n\n1. Download `comparador-*.zip` from [Releases](../../releases)\n2. Extract the ZIP file\n3. Open `chrome://extensions/`\n4. Enable **Developer mode** (toggle in top-right)\n5. Click **Load unpacked** and select the extracted folder\n\n---\n\n## Permissions\n\n| Permission         | Purpose                                                                                                                                                                                                                                                                                                                                                                                   |\n| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `activeTab`        | Access current tab to capture URL and content                                                                                                                                                                                                                                                                                                                                             |\n| `tabs`             | Create/manage tabs for batch capture                                                                                                                                                                                                                                                                                                                                                      |\n| `debugger`         | Chrome DevTools Protocol for full-page screenshots and HTML extraction                                                                                                                                                                                                                                                                                                                    |\n| `webRequest`       | Intercept response headers for comparison                                                                                                                                                                                                                                                                                                                                                 |\n| `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. |\n| `host_permissions` | Capture pages from any website                                                                                                                                                                                                                                                                                                                                                            |\n\n**Privacy:** All data stored locally. Nothing sent to external servers. See [PRIVACY_POLICY.md](PRIVACY_POLICY.md).\n\n---\n\n## Mock Server\n\nLocal HTTPS mock server for testing Comparador.\n\n```bash\ncd mock\nnpm install\nnpm run setup   # One-time: generate certs, add hosts, trust CA (requires sudo)\nnpm start\n```\n\n**Environments:** `dev.acme.local`, `stage.acme.local`, `www.acme.local`\n\n**Using with Comparador:**\n1. Create a new project (e.g., \"Acme\")\n2. Uncomment environments and paths in **Variables**\n3. Go to **Manage** → select project → **Setup** → **Generate Preview** → **Apply Changes**\n4. Capture pages and compare across environments\n\nNew projects come pre-configured for mock server — serves as a reference for real-world setup.\n\n---\n\n## Authors\n\n- **Krystian Panek** — Founder \u0026 Maintainer — [krystian.panek@vml.com](mailto:krystian.panek@vml.com)\n- **Tomasz Sobczyk** — Consultancy — [tomasz.sobczyk@vml.com](mailto:tomasz.sobczyk@vml.com)\n\n---\n\n## License\n\n- **Extension:** [Freeware](assets/EXTENSION-LICENSE)\n- **This repo:** [MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwttech%2Fcomparador","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwttech%2Fcomparador","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwttech%2Fcomparador/lists"}