Verify a Dynamic Chart in Selenium WebDriver

How to use automated testing on dynamically updating charts

In a previous article, I covered how to use automated testing for SVG charts and Canvas charts. Another scenario you may want to test with charts, is dynamic charts.

Dynamic charts are charts that auto update with new information. This one below updates every 2 seconds.

Example of a Dynamic Chart using ChartJS

Suppose you have a testing requirement to check the graph is dynamic. How could you use an automated test to verify that the chart gets updated over time?

Test Steps

1. Verify the chart exists and take a snapshot
2. Wait for the chart to update
3. Take another snapshot of the chart
   If desired, you can repeat steps 2–3 more times.
4. Verify the snapshots are all different

1. Verify the chart exists and take a snapshot

In my last article, I provided an example and the code to extract a snapshot of a canvas. Link below:

Automated Testing Charts in Canvas in Selenium WebDriver

In summary:

• Locate the canvas element
• Extract canvas element’s image binary with JavaScript.

# locate the canvas element
canvas_elem = driver.find_element(:xpath, "//div/canvas")
# extract canvas element's contents
js = "return arguments[0].toDataURL('image/png').substring(21);"
canvas_base64 = driver.execute_script(js, canvas_elem)

For dynamic chart validation purposes, we don’t need to save the image for a ‘snapshot’.

A snapshot just needs to uniquely identify the content within the chart. So it is fine to just leave it as the extracted image binary (canvas_base64 in the above code block).

Great! Now we have a value that represents the current chart position.

2. Wait for the chart to update

This step is quite straightforward.

# change the value to how often your chart updates
sleep 2

How long should I wait for?

If you don’t know how often your chart updates, you can use inspect element.

In the screenshot above, I found that there is a definedsetInterval for 2000ms (= 2 seconds).

3. Take another snapshot of the chart

Just like step 1, except now we don’t need to locate the canvas element again.

canvas_base64_2 = driver.execute_script(js, canvas_elem)

Save the snapshot under a different name, so that we can compare the two next.

4. Verify the snapshots are all different

From step 1 and 3, we have canvas_base64 and canvas_base64_2. If the chart is dynamic and step 2’s interval is correct — these two snapshots should be different.

In Ruby, this is easy. Check there are no duplicates with the uniq command. uniq only keeps unique elements, so we can verify the count does not change.

snapshots = [canvas_base64, canvas_base64_2]
expect(snapshots.uniq.count).to eq(2) # expect no duplicates

Complete Code

sleep 1 # wait for JS to load
canvas_elem = driver.find_element(:xpath, "//div/canvas")
js = "return arguments[0].toDataURL('image/png').substring(21);"
canvas_base64 = driver.execute_script(js, canvas_elem)
sleep 2 # change the value to how often your chart updates
canvas_base64_2 = driver.execute_script(js, canvas_elem)
snapshots = [canvas_base64, canvas_base64_2]
expect(snapshots.uniq.count).to eq(2) # expect no duplicates

Note:

• If you want to take some more snapshots, just repeat step 2 and 3 (sleep then take another snapshot) for extra verification.