Automated Testing Charts in Selenium WebDriver

How to verify your chart generation using Selenium WebDriver

Test Design

1. Verify the chart exists

Highcharts.chart('chart-container-9', {
chart: {
type: 'column',
},
// other chart settings...
});
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

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

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

Adding chart.png to BuildWise file archive setting.
chart.png listed under “Build artifacts” on BuildWise
chart.png opened in BuildWise
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