Playwright Visual Regression Suite
Automated visual regression testing using Playwright's screenshot comparison API (page.screenshot with maxDiffPixelRatio) and toMatchSnapshot assertions. Supports cross-browser testing on Chromium, Firefox, and WebKit.
npx skills add agentskillexchange/skills --skill playwright-visual-regression-suite
The Playwright Visual Regression Suite automates UI consistency checks using Playwright’s built-in screenshot comparison capabilities. It leverages page.screenshot() with configurable options including fullPage captures, element-level screenshots via locator.screenshot(), and clip regions for specific viewport areas.
What this skill actually does
The skill uses expect(screenshot).toMatchSnapshot() with tunable thresholds: maxDiffPixels for absolute pixel differences and maxDiffPixelRatio for percentage-based tolerance. It supports cross-browser baselines across Chromium, Firefox, and WebKit, maintaining separate golden files per browser and viewport size.
Advanced features include animation disabling via page.evaluate to freeze CSS transitions, font anti-aliasing normalization for CI environments, and dark/light theme variant testing. The suite integrates with Playwright’s test runner for parallel execution, generates HTML diff reports showing before/after/difference overlays, and supports baseline update workflows via –update-snapshots flag. CI integration includes GitHub Actions artifacts for failed screenshot storage.