skills.rest
jaktestowac
jaktestowacCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

running-visual-regression-tests

Configures and maintains Playwright visual regression suites with deterministic baselines and reviewed snapshot updates.

113|17|Updated Oct 5, 2025
Search Tags:#playwright#visual regression#ci testing#screenshot testing#baseline management#test stabilization#snapshot review
One-click install
npx skills add https://github.com/jaktestowac/awesome-copilot-for-testers --skill running-visual-regression-tests-jaktestowac
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: running-visual-regression-tests
Source: https://github.com/jaktestowac/awesome-copilot-for-testers/tree/main/plugins/running-visual-regression-tests/skills/running-visual-regression-tests
Command: npx skills add https://github.com/jaktestowac/awesome-copilot-for-testers --skill running-visual-regression-tests-jaktestowac

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Visual regression suites often become so noisy that teams reflexively run --update-snapshots, turning baselines into a record of whatever the code currently does and making the suite useless. This Skill provides a disciplined workflow for stabilizing pages, choosing snapshot surfaces, setting baseline policy, tuning thresholds, and reviewing every diff before it becomes a baseline. ## Core Features & Use Cases - Stabilization Gate: Eliminates nondeterminism from fonts, animations, time, data, network, and scrollbars before any threshold tuning, verified by three identical consecutive runs. - Baseline Policy & Containerized Generation: Defines where baselines are generated and stored, which platform axes are covered, and who may update them, with Docker-based generation matching the CI environment. - Review Workflow: Enforces a per-failure verdict (intended, regression, or noise) with CI diff artifacts, pull request checklists, and escalation of confirmed regressions to bug reports. - Use Case: Your Playwright snapshot tests pass locally but fail on every CI run. Use this Skill to move baseline generation into a pinned container, stabilize dynamic regions, and set up artifact uploads so every failure is reviewable. ## Quick Start Set up a visual regression testing workflow for my Playwright suite covering the checkout and dashboard pages, including baseline policy, stabilization, and CI diff artifacts.

Frequently Asked Questions about running-visual-regression-tests

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up visual regression testing with Playwright?▼

Start by stabilizing the page: await document.fonts.ready, disable animations, pin the clock, and seed data deterministically. Then configure toHaveScreenshot with a strict maxDiffPixelRatio around 0.001 and generate baselines in the same container that CI uses for comparison.

Why do Playwright screenshots pass locally but fail in CI?▼

Font rendering, anti-aliasing, and device pixel ratio differ between a developer machine and a Linux CI runner, so every text pixel differs. Generate baselines in a pinned Docker container matching the CI image, such as mcr.microsoft.com/playwright, and compare in that same image.

When should I use visual testing instead of functional assertions?▼

Use visual tests only when appearance is the risk: broken layouts at a breakpoint, theme tokens not applying, or component spacing drift. Text content, element presence, and disabled states belong in assertions, and contrast or focus issues belong in accessibility audits.

How do I handle dynamic content in screenshot tests?▼

Prefer pinning over masking: fix the clock, seed data, and stub avatars or third-party widgets with fixed assets. Mask only what cannot be controlled, using test ids rather than CSS classes, and record each mask with what coverage it removes.

What threshold values should I use for Playwright screenshot comparison?▼

Start with threshold around 0.2 for per-pixel color tolerance and maxDiffPixelRatio near 0.001. Raise threshold first for anti-aliasing noise; a maxDiffPixelRatio above roughly 0.01 can hide a missing button, so loosen only with a comment naming the noise source.

How do I review and update visual baselines safely?▼

Require a per-failure verdict of intended, regression, or noise before any baseline is written, with expected, actual, and diff images uploaded as CI artifacts. Intended changes update baselines in the same pull request with before-and-after images visible to reviewers.

Related Skills

Explore More Software Engineering Skills→
patricio0312revpatricio0312rev
5

data-seeding-fixtures-builder

Generate deterministic seed data for Prisma-based projects and relational databases.

Community
Advanced
ulises-jeremiasulises-jeremias
2

dots-workstation-bug

Automate bug reporting and triage using predefined templates and classification rules.

Community
Advanced
uiverifyuiverify
21

playwright-visual-testing

Diagnose and fix flaky visual diffs in Playwright archive-replay captures by pinning run-to-run page variation.

Official
Advanced
skydovesskydoves
303

asserting-bounds-and-dimensions

Assert Jetpack Compose layout dimensions and positions using dp-typed bounds checks.

Community
Intermediate