Automated Testing Charts in Selenium WebDriver

How to verify your chart generation using Selenium WebDriver

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...
});
  1. Wait for the JS to render
  2. Then verify that the svg tag exists
visit("/servers/1")
sleep 2 # wait JS rendering

elem = driver.find_element(:id, "chart-container-9")
elem_html = driver.execute_script("return arguments[0].outerHTML;", elem)
expect(elem_html).to include("<svg")

2. Saving your chart as an image

The solution: save the svg as a PNG image.

tmp_dir = File.expand_path File.join(File.dirname(__FILE__), "..", "tmp")
dest_image_file_path = File.join(tmp_dir, "chart.png")
FileUtils.rm dest_image_file_path if File.exists?(dest_image_file_path)

# save the chart image, selenium 4 new feature
elem.save_screenshot(dest_image_file_path)
expect(File.exists?(dest_image_file_path)).to be true

3. Verify the image file

Furthermore, we can verify whether what we saved is a valid image or not.

require('fastimage')
puts FastImage.type(dest_image_file_path) # => "png"
puts FastImage.size(dest_image_file_path) # => [300, 60]
img_dim = IO.read(dest_image_file_path)[0x10..0x18].unpack('NN')
expect(img_dim).to eq([300, 60])

4. Visually inspect the image file on the Continuous Testing (CT) server

Apart from the automated test’s purposes, we may want to make the saved image file available to all team members. This can be beneficial if you manually want to verify the chart contents or other team members also want to look at the chart.

Adding chart.png to BuildWise file archive setting.
chart.png listed under “Build artifacts” on BuildWise
chart.png opened in BuildWise

Complete Code below

load File.dirname(__FILE__) + '/../test_helper.rb'describe "Sequential Test - Project Chart" do
include TestHelper
before(:all) do
# browser_type, browser_options, site_url are defined in test_helper.rb
@driver = $driver = Selenium::WebDriver.for(browser_type, browser_options)
driver.manage().window().resize_to(1280, 720)
driver.get(site_url)
relogin("pro")
end
after(:all) do
driver.quit unless debugging?
end
it "Chart exists on server project page" do
visit("/servers/1")
sleep 2 # wait JS rendering

elem = driver.find_element(:id, "chart-container-9")
elem_html = driver.execute_script("return arguments[0].outerHTML;", elem)
expect(elem_html).to include("<svg")

# save chart image, make sure no existing files first, relative path
tmp_dir = File.expand_path File.join(File.dirname(__FILE__), "..", "tmp")
dest_image_file_path = File.join(tmp_dir, "chart.png")
FileUtils.rm dest_image_file_path if File.exists?(dest_image_file_path)

# save the chart image, selenium 4 new feature
elem.save_screenshot(dest_image_file_path)
expect(File.exists?(dest_image_file_path)).to be true

img_dimension = IO.read(dest_image_file_path)[0x10..0x18].unpack('NN')
puts img_dimension.inspect
expect(img_dimension).to eq([300, 60])
end
end

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store