Canvas & Charts
Practice testing things that have no DOM: a moving target drawn on a canvas, a line you have to draw, and a chart whose values only appear in a tooltip.
1. Moving Target
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
Hits: 0 · Misses: 0
2. Draw a Line
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
3. Chart Tooltip
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
4. Solutions
Try the challenges yourself first. Reference solutions are hidden until you ask for them.
About this Canvas & Charts page
Canvas testing is automating a drawing surface where shapes are pixels, not DOM elements, so locators cannot find them. You work with coordinates instead: click at an offset, press and drag the mouse to draw, and read results from the page state or a screenshot. This page gives you a moving target, a stroke task and chart tooltips to practice.
Frequently asked questions
How do you click a specific point on a canvas in Playwright?
Use locator.click({ position: { x: 120, y: 80 } }), where the position is relative to the canvas top-left corner. For a moving target, read its coordinates from the page via evaluate, or expose them in app state, then click at that position.
How do you click a canvas by offset in Selenium 4?
Use new Actions(driver).moveToElement(canvas, x, y).click().perform(). In Selenium 4 the offset is measured from the element's center, not its top-left, so subtract half the width and height from your coordinates.
How do you draw on a canvas in an automated test?
Move the mouse to the start point, press the button, move through several points, and release. In Playwright: mouse.move, mouse.down, mouse.move with steps, mouse.up. In Selenium: clickAndHold, moveByOffset calls, release. Then verify via app state or a screenshot.
How do you verify a chart tooltip drawn on a canvas?
Hover the data point coordinates, then read the tooltip. If the tooltip is DOM-based, assert its text normally. If it is drawn on the canvas, compare a screenshot with toHaveScreenshot, or read the chart library's data through page.evaluate.
Why can't I find elements inside a canvas with locators?
A canvas is a single bitmap element. Shapes drawn into it are not in the DOM, so CSS and XPath cannot target them. Use coordinate input, JavaScript access to the app's model, or visual comparison instead.
Free developer tools on Randomly.online
QA Playground is part of Randomly.online. These tools help while you write and debug tests: