Loading challenge...
Canvas Data Grid
Read a grid painted entirely on a canvas with no DOM cells — via the JS data API or the accessibility table mirror
What you will learn
- Recognize that canvas-rendered data has no addressable DOM and choose a reliable extraction strategy
- Use window.__grid and the #grid-a11y accessibility mirror as automation escape hatches
- Map click coordinates to grid cells and verify selection via data attributes
Canvas Data Grid — No DOM Cells
A 4×5 data grid is painted entirely onto a <canvas> — there are no <td> nodes to query, so you must reach the values another way
Every value below is drawn with fillText on a single <canvas>. A normal getByText or CSS selector finds nothing — the grid is just pixels.
Three escape hatches exist: the window.__grid JS API, a visually-hidden <table> mirror, and pixel-coordinate clicking. Click a cell to populate the selection readout.
The Grid
Click any cell — coordinates map to row,col
No cell selected — click the canvas.
| 7 | 10 | 13 | 16 |
| 19 | 22 | 25 | 28 |
| 31 | 34 | 37 | 40 |
| 43 | 46 | 49 | 52 |
| 55 | 58 | 61 | 64 |
Testing Tips
Three ways past a canvas
- ✓ Robust: read
window.__grid.cell(r, c)viapage.evaluate(() => window.__grid.cell(0, 0))— exact values, no pixel guessing, but it depends on the app exposing the API - ✓ Most portable: query the
#grid-a11ytable —page.locator('#grid-a11y td')gives real<td>nodes withdata-row/data-col; works with any framework and aids screen readers - ✓ Brittle: click by coordinate —
#grid-canvas.click({ position: { x, y } })then read#grid-selected[data-cell]; depends on canvas size and breaks if layout shifts - ✓ Assert the selection via the attribute
#grid-selected[data-cell="0,0"], not the rendered text, so the check survives copy formatting changes - ✓ Contrast the three: the JS API is fastest but coupled to internals, the table mirror is the most maintainable, coordinate math is the last resort when neither exists
