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.

Testing Tips

Three ways past a canvas

✓ Robust: read window.__grid.cell(r, c) via page.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-a11y table — page.locator('#grid-a11y td') gives real <td> nodes with data-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

Related Challenges

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.

Accessible mirror of the canvas data grid

Testing Tips

Three ways past a canvas

✓ Robust: read window.__grid.cell(r, c) via page.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-a11y table — page.locator('#grid-a11y td') gives real <td> nodes with data-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

7	10	13	16
19	22	25	28
31	34	37	40
43	46	49	52
55	58	61	64

7	10	13	16
19	22	25	28
31	34	37	40
43	46	49	52
55	58	61	64

Canvas Data Grid

What you will learn

Canvas Data Grid — No DOM Cells

The Grid

Testing Tips

Timer

Need Help?

Related Challenges

CAPTCHA: Audio

CAPTCHA: reCAPTCHA v3

Network Intercept

Canvas Data Grid

What you will learn

Canvas Data Grid — No DOM Cells

The Grid

Testing Tips

Timer

Need Help?

Related Challenges

CAPTCHA: Audio

CAPTCHA: reCAPTCHA v3

Network Intercept