Verify a Dynamic Chart in Selenium WebDriver

How to verify a chart changed in Selenium WebDriver

A repost of the aggregate of my daughter’s two articles with permission and slight modification. I added it here for the convenience of my blog subscribers. You can find more Selenium examples like this one in my eBook: Selenium WebDriver Recipes in Ruby. This is also included in my “How to in Selenium WebDriver” series.

Here is one chart that updates every a few seconds.

Example of a Dynamic Chart using ChartJS

This article shows an automated test, in Selenium WebDriver, to verify this chart is actually dynamic, i.e. changes.

Table of Contents:
· Test Design
· Test Steps
  ∘ 1. Verify the chart exists
  ∘ 2. Extract the Canvas & Save the chart to a file
  ∘ 3. Verify the image file
  ∘ 4. Wait for the chart to update
  ∘ 5. Take another snapshot of the chart
  ∘ 6. Verify the snapshots are different
· Completed Test Script

Test Design

1. Verify the chart is present by checking the canvas or svgtag
2. Extract the Canvas & Save the chart to a file
3. Verify the image file
4. Wait for the chart to update
5. Take another snapshot of the chart
6. Verify the snapshots are all different

Test Steps

1. Verify the chart exists

Right-click the chart (in Chrome) to inspect, thecanvas tag is highlighted.

HTML Source:

// ...
 <div id="container">
  <h2>Canvas</h2>
  <canvas id="myChart" width="800" height="300" style="width: 400px; height: 150px;"></canvas>
 </div>
// ...

Verifying the existence of the canvas tag is good enough for now (we will do further verification later).

canvas_elem = driver.find_element(:xpath, "//div/canvas")
# if it does not exist, the above will throw error

Rendering charts (by JavaScript) takes a short time, so add a minor wait. The complete test statements…