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