Automated Testing Charts in Canvas in Selenium WebDriver

How to verify the content in a canvas in Selenium WebDriver

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: https://www.chartjs.org/docs/latest/samples/bar/vertical.html).

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…