Automated Testing Charts in Selenium WebDriver

How to verify your chart generation using Selenium WebDriver

Charting, such as HighCharts, is commonly seen on modern web apps. These charts packages usually generate charts in an SVG (Scalable Vector Graphics) format.

We probably want to test charts to see if they are being displayed correctly — but how can we do that with automation?

Test Design

1. Verify the chart is present by checking the svg tag
2. Save the chart to a file
3. Verify the image file
4. Visually inspect the image file on the Continuous Testing (CT) server

1. Verify the chart exists

To verify that the chart exists, we need to check whether the div (or figure) that you used to trigger the chart contains the chart. In HighCharts, you must create a div, and give it an id and then HighCharts will render the chart there for you. Here are the first few lines of the JavaScript I used to generate a chart in chart-container-9.

Highcharts.chart('chart-container…