Canvas Chart
Eight bars of test-run data, zero DOM elements per bar: locators cannot see inside a <canvas>. You get three honest ways in: coordinate math for clicks, the accessible data-table twin for values, and toHaveScreenshot() against the deterministic baseline for pixels. SVG feels familiar? That easier cousin lives on the SVG locators widget.
8Bars drawn
0DOM nodes per bar
1Data-table twin
BaselineDeterministic render
Monthly regression runs, passed builds
Hover for a tooltip, click a bar to inspect it. The chart redraws identically every load until you randomize.
Data table (the accessible twin)
| Month | Passed builds |
|---|
Selected bar
Click a bar on the canvas; this panel is the DOM echo your assertions can reach.
Monthnone
Passed builds-
Share of best month-
Clicks registered0
Nothing here updates unless your click actually lands inside a bar's pixels. Missing by 10px is a silent no-op, exactly like production canvas apps.
Drills
- Prove the void. Assert the canvas exists, then assert
locator('#chart rect')resolves to zero elements. Canvas has no insides. - Coordinate click. Read the canvas
boundingBox(), compute the 3rd bar's center (8 equal slots across the plot area), click it, and assert the Selected bar panel shows March. - Tooltip on hover.
hover()over the 6th bar's coordinates and assert the tooltip text contains the June value from the data twin. - Twin as oracle. Open the data table, read all 8 values, and assert the highest one matches the "share of best month = 100%" bar when clicked.
- Visual regression.
await expect(page.getByTestId('chart-canvas')).toHaveScreenshot()on baseline; run twice to prove stability, then click Randomize and watch the comparison fail for the right reason. Reset restores the baseline pixels.