🪞 Mirror for Playwright
Automatically compares your Playwright test runs across QA and PROD (or any two environments), and tells you exactly what changed — not just that something failed.
What it catches
- Element ID / attribute drift:
#username in QA is #userid in PROD — even when id, name, and placeholder all changed at once.
- Value drift: a cart total showing
$50.00 in QA and $45.00 in PROD, with the same element id.
- Missing content: a validation message that shows in QA but never renders in PROD.
- Dialogs:
alert() / confirm() / prompt() text differences.
- Iframes and extra windows/tabs: scoped separately so a field inside a popup is never confused with one on the main page.
All of this works for any page, any form, any workflow — there's no config file, no selector alias list, and no per-page setup. It reads your test's own actions (what you .fill(), what you .click()) to scope evidence to exactly what that test touched.
Quick start
- Open a Playwright project (or an empty folder — MIRROR will help you scaffold one).
- Run MIRROR: Setup Project from the Command Palette (
Ctrl+Shift+P).
- Set your QA and PROD URLs when prompted (or edit
.env directly).
- Run MIRROR: Patch Test Imports once, so your spec files import from the generated
scripts/mirror-fixtures.js instead of @playwright/test directly. (This is a drop-in replacement — every normal Playwright API still works exactly the same, you just also get MIRROR's capture for free.)
- Run MIRROR: Run Full Comparison (or
Ctrl+Shift+M).
- Open
mirror-report/mirror-report.html for the results.
or
Directly install the MIRROR Plugin from vs code market place through vs code extensions
Update with this import in your playwright tests: import { test, expect } from '../scripts/mirror-fixtures';
Then execute the Tests and generate the MIRROR report
Finally beautyfull test report generated with realtime ENV Comparison mode.
Commands
| Command |
What it does |
MIRROR: Setup Project |
Scaffolds playwright.config.ts, .env, and the scripts/ folder |
MIRROR: Configure Environments |
Set QA/PROD URLs |
MIRROR: Patch Test Imports |
Rewrites spec file imports to use mirror-fixtures.js |
MIRROR: Run Full Comparison |
Runs tests against both projects and generates the report |
MIRROR: Regenerate Scripts |
Updates scripts/mirror-*.js to the latest bundled version |
How it works (briefly)
MIRROR ships three scripts into your project's scripts/ folder:
mirror-fixtures.js — a thin wrapper around @playwright/test that captures a snapshot of the page (plus every iframe and window) whenever a test runs, and tracks which elements you actually interacted with.mirror-engine.js — compares the QA and PROD snapshots for each test, matching fields by what a user would actually recognize (label, placeholder, data-testid) rather than by id/name (which is usually the thing that drifted).mirror-reporter.js — renders the comparison as a dark-themed HTML report with screenshots and a searchable mismatch table.
You can inspect, edit, or version-control all three — they're plain JavaScript files in your own repo, not hidden inside the extension.
Requirements
- Node.js 18+
@playwright/test (MIRROR will offer to install it if missing)
License
MIT
