qa-charts
Chart + data viz testing: 3 skills (chartjs-snapshot-tests, d3-snapshot-tests, vega-spec-validator) and 1 agent (chart-test-author). Covers Canvas + SVG + declarative-spec visualizations, complementing qa-visual-regression which targets general UI screens.
Install this plugin
/plugin install qa-charts@testland-qaPart of role bundle: qa-role-frontend
qa-charts
Chart + data viz testing - Canvas (Chart.js), SVG (D3), declarative spec (Vega / Vega-Lite). Closes the gap left by qa-visual-regression which covers UI screens but not chart-render correctness.
Components
| Type | Name | Description |
|---|---|---|
| Skill | chartjs-snapshot-tests | Canvas snapshot via Playwright toHaveScreenshot; programmatic canvas.toDataURL() diff; jsdom + node-canvas unit tests; tooltip + legend interaction; multi-DPI handling |
| Skill | d3-snapshot-tests | SVG outerHTML structural snapshot (with ID normalization); rendered-image snapshot; per-element data-binding test; update-join (enter/exit/reorder) correctness; SVG accessibility metadata |
| Skill | vega-spec-validator | JSON Schema validation; Vega-Lite → Vega compilation test; multi-view composition (facet, layer, repeat); transform output verification; spec-snapshot regression |
| Agent | chart-test-author | Detects the chart library (Chart.js, D3, Vega-Lite) from package.json + imports, routes to the matching sibling skill, and emits one chart-regression test file |
Install
/plugin marketplace add testland/qa
/plugin install qa-charts@testland-qaSkills
chartjs-snapshot-tests
Snapshot-test Chart.js charts - render via headless Chromium / jsdom + canvas mock, capture canvas pixels via `canvas.toDataURL()` + image-diff, disable animations (`options.animation = false`) for stable snapshots, test tooltip + legend interactions. Pairs with qa-visual-regression for general UI snapshot patterns.
d3-snapshot-tests
Snapshot-test D3.js charts - D3 generates SVG (not Canvas, per d3js.org getting-started); use `outerHTML` snapshot for static structure, `toHaveScreenshot` for rendered SVG; jsdom for headless render in unit tests; disable transitions for stable snapshots; per-element data-binding correctness tests.
vega-spec-validator
Validate Vega + Vega-Lite specifications against the JSON Schema (vega.github.io/schema), test cross-engine compatibility (Vega-Lite compiles to Vega per the canonical compiler), and verify data-binding correctness. Pair with d3-snapshot-tests when Vega specs render to SVG; pair with chartjs-snapshot-tests when rendered to Canvas.