Automated Testing Charts in Canvas in Selenium WebDriver

How to verify the content in a canvas in Selenium WebDriver

Courtney Zhan
3 min readMay 15, 2022


In a previous article, I showed you how to test charts in an SVG format. Charts (and other diagrams) can also be embedded in a Canvas on a web page.

Test Site

In this tutorial I will use the demo bar chart on ChartJS’ website (link:

Test Design

  1. Verify the chart is present by checking the canvas tag
  2. Extract the Canvas & Save the chart to a file
  3. Verify the image file

Test Steps

1. Verify the chart exists

Right-click the chart to inspect, thecanvas tag is highlighted.

HTML Source:

// ...
<div class="chart-view">
<canvas width="1175" height="586">
// ...

Verifying the existence of the canvas tag is good enough for now (we will do further verification later).

canvas_elem = driver.find_element(:xpath, "//div/canvas")
# if it does not exist, the above will throw error

Rendering charts (by JavaScript) takes a short time, so add a minor wait. The complete test statements look like below.

sleep 1 # wait for the canvas to load
canvas_elem = driver.find_element(:xpath, "//div/canvas")

However, we can not be sure that the chart is actually displayed correctly. The solution: save the chart as a PNG.

2. Extract the Canvas & Save the chart to a file