Automated Testing Charts in Selenium WebDriver

How to verify your chart generation using Selenium WebDriver

A repost of my daughter’s article with permission. I added it here for the convenience of my blog subscribers.

This article is also included in my “How to in Selenium WebDriver” series.

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-9', {
    chart: {
        type: 'column',
    },
    // other chart settings...
});

If we view the page source, you will notice that the chart is not there. There is nothing under chart-container-9.

JavaScript renders the chart afterwards, so it doesn’t show up in the Page Source. Once rendered properly, it will show on Inspect Element.

However, using Inspect Element, we can see that the chart container (in my case, chart-container-9 , which is the top-most chart) has an SVG.