qa-visual-regression
Visual regression testing: 7 skills (percy-visual-regression-testing, chromatic-visual-regression-testing, playwright-snapshots with the responsive breakpoint matrix, storybook-visual-regression-testing, chart-render-tests covering Chart.js / D3 / Vega chart regression, visual-baseline-conventions, visual-baseline-gate emitting binding gate artifacts) and 2 agents (visual-diff-classifier with a per-PR summary mode, visual-baseline-curator).
Install this plugin
/plugin install qa-visual-regression@testland-qaPart of role bundles: qa-role-automation-engineer, qa-role-sdet, qa-role-frontend
qa-visual-regression
Visual regression testing across Percy, Chromatic, Playwright snapshots, and Storybook visual tests, plus chart-render regression (Chart.js / D3 / Vega), adversarial diff classification with a per-PR summary mode, baseline curation, and a binding CI baseline gate.
Components
| Type | Name | Description |
|---|---|---|
| Skill | percy-visual-regression-testing | Author Percy snapshots via @percy/playwright/cypress/selenium/storybook; run with percy exec; review diffs in the Percy UI. |
| Skill | chromatic-visual-regression-testing | Run Chromatic on Storybook / Playwright / Cypress; configure baselines, TurboSnap, exit codes for CI gating. |
| Skill | playwright-snapshots | Author expect(page).toHaveScreenshot() assertions; configure mask/clip/threshold/maxDiffPixels; manage per-OS / per-browser snapshot dirs and --update-snapshots; responsive breakpoint-matrix reference. |
| Skill | storybook-visual-regression-testing | Wire visual regression into Storybook via @chromatic-com/storybook (hosted) or @storybook/test-runner postVisit + Playwright (self-hosted). |
| Skill | chart-render-tests | Chart-render regression across the three library families: Chart.js canvas snapshots, D3 SVG structural snapshots + data-binding tests, Vega/Vega-Lite spec validation + compile test; per-library depth in references/. |
| Skill | visual-baseline-conventions | Reference catalog: engine selection, story/page/breakpoint coverage, mask/threshold/wait decision matrix, severity tiering, anti-patterns. |
| Skill | visual-baseline-gate | CI gate: aggregate diff classifications + acceptance log into a single go/no-go verdict; emit binding visual-gate.json + visual-gate.md artifacts; enforce author-cannot-self-approve. |
| Agent | visual-diff-classifier | Adversarial reviewer of visual diffs: classify each as intentional / incidental / regression; per-PR summary-comment mode clusters 20+ diffs by component and intent. |
| Agent | visual-baseline-curator | Builder: proposes a coverage-optimal initial baseline set, generates engine config files, runs a dry-run to verify the suite compiles. |
Install
/plugin marketplace add testland/qa
/plugin install qa-visual-regression@testland-qaSkills
chart-render-tests
Chart-render regression testing across the three chart-library families - Canvas (Chart.js: locator screenshot snapshot + `canvas.toDataURL()` diff with animations disabled), SVG (D3: `outerHTML` structural snapshot with generated-ID normalization + per-element data-binding tests), and declarative specs (Vega / Vega-Lite: JSON Schema validation + Vega-Lite → Vega compile test). Detects the family from package.json imports (chart.js / d3 / vega-lite), then applies the matching recipe; full per-library depth with citations in references/chartjs.md, references/d3.md, references/vega.md. Use when a dashboard or data product renders charts and their output needs regression coverage - before a chart-library major upgrade, after a theming change, or when runtime-generated Vega specs must be proven valid before render.
chromatic-visual-regression-testing
Authors and runs Chromatic visual tests on Storybook, Playwright, or Cypress projects via the `chromatic` CLI; configures baselines, TurboSnap, UI Review, and CI gating; reads exit codes for change-vs-error classification. Use when the project ships visual regression coverage to Chromatic Cloud.
percy-visual-regression-testing
Authors Percy visual snapshot tests via the @percy/cli + framework SDK (Playwright, Cypress, Selenium, Storybook), runs them with `percy exec -- {test command}`, configures viewports / masking / ignored regions, and reviews diffs in the Percy build UI. Use when the project ships visual regression coverage to BrowserStack Percy.
playwright-snapshots
Authors Playwright `expect(page).toHaveScreenshot()` assertions, configures masks / clips / threshold / maxDiffPixels per test, manages the per-OS / per-browser snapshot directory, and runs the update flow with `--update-snapshots`; references/ carry the responsive-breakpoint viewport matrix (one project per breakpoint, cross-breakpoint matrix report, plus Chromatic / Percy / Storybook test-runner viewport syntax). Use when the project ships self-hosted visual regression coverage in Playwright (no external snapshot service), or needs a unified multi-viewport breakpoint matrix.
storybook-visual-regression-testing
Sets up visual regression coverage for a Storybook project - either via the official @chromatic-com/storybook addon (hosted) or via @storybook/test-runner with a postVisit hook that calls Playwright's toHaveScreenshot (self-hosted). Covers test-runner install, lifecycle hooks (setup / preVisit / postVisit), and CI integration. Use when a repo already has a working `.storybook/` config and the team wants per-story visual coverage rather than page-level snapshots.
visual-baseline-conventions
Reference catalog for visual regression coverage decisions - which Storybook stories or pages get baselines, how to choose breakpoints, when to mask vs adjust threshold, when to add or remove a baseline, and a decision matrix for picking among Percy / Chromatic / Playwright / Storybook test-runner. Use when designing visual coverage for a new project or auditing an existing baseline set.
visual-baseline-gate
Consumes pre-classified visual-diff JSON and a reviewer-signed acceptance log to produce a single go/no-go CI verdict for visual regression. Blocks when intentional baseline changes lack a non-author reviewer sign-off or when regressions are present, and emits the binding gate artifacts - visual-gate.json + visual-gate.md - with fail-closed handling of a missing classifier run and author-cannot-self-approve enforcement, so the pipeline can exit non-zero on BLOCK. Use when the gate's input is pre-classified diff data and the enforcement concern is reviewer approval and a binding CI verdict.
Agents
visual-baseline-curator
Builder agent that proposes a coverage-optimal initial baseline set for a Storybook (or page-driven app), generates the matching engine config (Chromatic story parameters / Percy widths / Playwright projects / Storybook test-runner postVisit hook), and writes the files into the repo. Use when starting visual regression on a project that has none, or auditing an existing baseline set against the conventions.
visual-diff-classifier
Adversarial reviewer of visual regression diffs. Classifies each diff in a build (Percy / Chromatic / Playwright snapshot report) into one of three categories - intentional, incidental, or regression - with rationale and recommended action; on large builds (20+ diffs) it also emits a per-PR summary-comment report mode that clusters diffs by component / route, separates intent-aligned changes from cascade / regression suspects, and points the reviewer at the screenshots that need actual eyes. Use when reviewing a visual-test build that the team is about to accept; surfaces "looks intentional but isn't" cases that human reviewers rubber-stamp.