Selenium WebDriver and Highchart testing

Question

I know this question has been asked before on S.O. and other websites but I haven't found a definite answer -- most of them say its not easily done but I wanted to make sure that was the final verdict.

Here's my situation:

I'm testing a website that is using Highcharts (http://www.highcharts.com) using Selenium WebDriver (Java).

I basically want to grab the information that is displayed in a small tooltip pop-up that appears when you hover your mouse over each datapoint on the Highchart's line graph.

Looking at the web page's HTML code, I noticed there is <g class="highcharts-tooltip".... I also noticed that, as you move your mouse, the (X,Y) values in ...transform="translate(X,Y)"> change, which then changes the information displayed in the tool tip.

Knowing this, my approach would be to somehow grab all the (X,Y) values and plug them into the transform fields and grab the tooltip data. But I don't know how to programmatically grab all the (X,Y) values through Selenium.

Has anyone tackles this issue in the past or has a better way to grab the necessary information?

I also asked this question on StackOverflow - https://stackoverflow.com/questions/14202731/selenium-webdriver-and-highchart-testing

Answer 1

Selenium does not necessarily have built in support for SVG http://www.w3schools.com/svg/default.asp which is what Highcharts uses for its charts. However, there are a couple of ways you may be able to approach this. It is also unclear exactly what you want to test or how you want to interact with these elements. Assuming that all you need to do is change the x/y coordinates of the mouse and read the tooltip - here are my suggestions. These are in C#, but JAVA should be pretty similar. I have not tried any of them, so you would need to try them out yourself:

1. Get the x/y coordinates of the rect tag and then use an offset of that to move the mouse to the locations you want. You would need to know ahead of time what offsets you want to move to (no easy way I know of to determine the offset based on the content within the SVG). You can use the Actions classes MoveToElement method with the overload to provide an offset for x and y coordinates.
2. Execute javascript to directly modify the x/y coordinates using the ExecuteScript function: (IJavaScriptExecutor)webDriver.ExecuteScript(script, args)

Getting the tooltip should be the simplest part, since you should be able to find the element and use the GetAttribute method to get the tooltip value (or inner text, I can't tell from your example above).

Answer 2

I started creating a library to work with HighCharts, what I currently have is available here:

https://github.com/Ardesco/Powder-Monkey/tree/master/src/main/java/com/lazerycode/selenium/graphs

It's quite hard to provide a generic library that deals with HighCharts as the customisation options on the individual charts can modify the SVG markup quite a bit. Hopefully the above will help to a degree.

As I do more it will be updated.