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.
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
- Verify the chart exists and take a snapshot
- Wait for the chart to update
- Take another snapshot of the chart
If desired, you can repeat steps 2–3 more times. - 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:
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 updatescanvas_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.