Visual Regression Testing with Playwright
Automate visual regression testing for your web applications. Compare feature branch changes against main branch baselines automatically.
Install from MarketplaceEverything you need to catch visual bugs
Side panel interface
Dedicated panel in the Activity Bar for easy access to all testing features.
Saved URL sets
Save and manage URL sets for repeated testing workflows.
Smart warnings
Alerts for uncommitted changes and unsaved test set modifications.
Branch protection
Visual warning when on main branch to prevent accidental test runs.
Persistent snapshots
Automatically saves baseline and comparison snapshots for later review.
Config display
View current settings at a glance in the panel.
Auto baseline comparison
Captures main branch screenshots and compares with your feature branch.
Smart branch switching
Handles all Git operations automatically.
Zero configuration
Works with your existing Playwright setup out of the box.
HTML reports
Side-by-side comparison of changes with interactive slider.
Environment variables
Pass custom variables for auth bypass and more.
Multiple URL testing
Test several routes in one run.
Status bar integration
Quick access to tests and reports from the status bar.
Eight steps to visual confidence
Safety checks
Warns if you have uncommitted changes or unsaved test set modifications.
Clears existing snapshots
Removes temporary snapshots from previous runs.
Captures baseline
Switches to main branch and captures baseline screenshots.
Saves baseline
Stores baseline to .visual-regression-snapshots/baseline/.
Returns to feature branch
Switches back to your working branch.
Runs comparison
Compares new screenshots against baseline.
Saves comparison
Stores results to .visual-regression-snapshots/comparison/.
Shows HTML report
Opens interactive report if differences are found.
Customize to your workflow
| Setting | Default | Description |
|---|---|---|
testPath | tests/visual | Path to Playwright test files |
mainBranch | main | Main branch name |
serverStartCommand | npm run dev | Command to start dev server |
serverPort | 3000 | Dev server port |
serverStartupTime | 5000 | Server startup wait time (ms) |
environmentVariables | {} | Custom environment variables |
testImportPath | @playwright/test | Import path for test fixtures |
waitForSelector | "" | Optional CSS selector to wait for |
showStatusBar | true | Show/hide status bar item |
notifyOnCompletion | true | Show notification when tests complete |
autoRunOnSave | false | Automatically run tests on file save |
autoRunDelay | 2000 | Delay before auto-running tests (ms) |
Requirements
Node.js 16+
Required for Playwright and the extension runtime.
Git repository
Branch switching and baseline comparison require Git.
Playwright
npm install -D @playwright/test && npx playwright install
Dev server
A running dev server for screenshot capture.
Ready to catch visual regressions?
View the source code on GitHub or browse more tools in the garden.