Test Highcharts with Watir Webdriver - ruby

Question

i'm writing Ruby in Watir webdriver and i would like to test highcharts accuracy of data presented in comparison of a CSV file (which i already read). How can i read the highchart data from the website?
A highchart graph generated with many data dots as you mouseover the dot, a data will be shown in a box.
I cannot locate the element using watir webdriver as what i see from source that each dot are path tags.
I am thinking maybe automate the cursor to move to a x y location but not sure how to do that. Any helps? thank you

Answer 1

Assumptions
Since we only have an image of your chart, rather than the specific html, I will assume the graph is similar in design to the "Basic Line" highcharts demo. The below will hopefully work conceptually for your graph (ie the approach will probably work, but it will likely require some tweaks).
Get Path Elements
In the graph, there is a path element to draw each point, as well as a path element to draw the line.
<g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(62,55) scale(1 1)" clip-path="none">
<path fill="#2f7ed8" d="M 638.25 182.5 C 643.578 182.5 643.578 190.5 638.25 190.5 C 632.922 190.5 632.922 182.5 638.25 182.5 Z"></path>
The g and path elements are not directly supported by watir, so you will need to use the generic element type with a css or xpath locator.
#Get the first line (as there are 4 in the demo)
series1 = browser.element(:css => 'g.highcharts-markers')
#Get the data points (the last point is ignored since it is the line)
all_path_elements = series1.elements(:css => 'path')
points = all_path_elements[0..-2]
Simulate MouseOver
You can simulate mousing over an element using the hover method:
browser.element(:css => 'g.highcharts-markers path').hover
Read the Popup
The html of the popup looks like:
<g opacity="0" transform="translate(146,222)" visibility="hidden" style="cursor:default;padding:0;white-space:nowrap;" zIndex="8" class="highcharts-tooltip">
<text zIndex="1" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;" y="21" x="8">
<tspan x="8" style="font-size: 10px">Apr</tspan>
<tspan dy="16" x="8" style="fill:#8bbc21">Berlin</tspan>
<tspan dx="0">: </tspan>
<tspan dx="0" style="font-weight:bold">8.4°C</tspan>
</text>
We can get the text of the popup using either of the following:
#All text together
puts browser.element(:css => 'g.highcharts-tooltip').text
#=> "DecTokyo: 9.6°C"
#Each line of the popup
browser.elements(:css => 'g.highcharts-tooltip tspan').each{ |x| puts x.text }
#=> "Dec"
#=> "Tokyo"
#=> ":"
#=> "9.6°C"
Note that the text method only displays visible text, therefore you need to ensure that the popup is displayed before getting the text. Alternatively you could parse the html of the elements.
Search the Data Points
To find the value (ex temperature) for the specific date, we need to iterate over the path elements until we find one that matches the desired date. Using the points variable from before, let us get the value for July.
point = points.find do |p|
#Hover over a point
p.hover
#Get the month from the popup
month = browser.elements(:css => 'g.highcharts-tooltip tspan')[0].text
#Keep going until the month is "Jul"
month == 'Jul'
end
#Get the value of the point
point.hover
puts browser.elements(:css => 'g.highcharts-tooltip tspan')[3].text
#=> "25.2°C"
This value could then be compared to the spreadsheet of expected values.
Running Script
Putting all the points together, gives the final running example.
require 'watir'
browser = Watir::Browser.new :chrome
browser.goto 'http://www.highcharts.com/demo/'
series1 = browser.element(:css => 'g.highcharts-markers')
all_path_elements = series1.elements(:css => 'path')
points = all_path_elements[0..-2]
point = points.find do |p|
p.hover
month = browser.elements(:css => 'g.highcharts-tooltip tspan')[0].text
month == 'Jul'
end
point.hover
puts browser.elements(:css => 'g.highcharts-tooltip tspan')[3].text
#=> "25.2°C"