Highcharts elements automation?

[Mykola]

Hi All,
Our web application uses a lot of Highcharts elements.
We try to automate some simple scenarios with Highcharts, but no luck there.
Typical scenario:
- Perform click on specified bar column on the chart. Chart sample can be found here:
http://www.highcharts.com/demo/bar-basic

After some investigation we found that we need perform click operation on some <rect /> DOM element which represent needed bar column.
But unfortunately neither native Telerik Click() method (we get this <rect /> element as HtmlControl), no pure MouseClick (which emulate mouse move/click) does not work here.

We really stack at this point, and can't figure out how such simple operation can be done within Telerik Test Framework functionality.
We use next hardware:
OS: Win 7 x32/64
Browser: Firefox 16.0.2
TTF: 2012.2.1002

Any ideas how it can be done ?

Thanks in advance!

[Plamen]

Hi Mykola,

Unfortunately due to the complexity of these custom Highchart elements, you can only click on the bar columns using "Blind" mouse clicks. As you can see in the article and this video, this can be done easily via the Test Studio UI.

However you'll probably have to do some guess work to get the coordinates when working only in code. Here's how to use desktop mouse clicks in code:

Manager.Desktop.Mouse.Click(MouseClickType.LeftClick, 500,1000);

Where 500 and 1000 are respectively the X and Y coordinates of the Click.

All the best,
Plamen
the Telerik team

[Mykola]

Hi Plamen,
Thanks for provided solution!
We try to use pure UI click before, in a bit another way -  using MouseClick() from HtmlControl. But there was also couple issues.
I try use this approach and it works for us under Chrome 23, IE 9, but does not work under Firefox 16.
Actually we can't hardcode coordinates, so we get them calling GetRectangle() from Element.
And GetRectangle() methos crash under Firefox.
I spent some time with more deeper debugging and found the root cause of the this issue.
So, here we are, step-by-step:
1. GetRectangle() raised the next exception:
Unexpected exception thrown trying to get the rectangle coordinate of an element from the browser.
Exception: System.FormatException: Input string was not in a correct format.
   at System.Number.ParseDouble(String value, NumberStyles options, NumberFormatInfo numfmt)
   at System.Convert.ToDouble(String value, IFormatProvider provider)
   at ArtOfTest.WebAii.ObjectModel.Element.GetRectangle()

2. I take a look into GetRectangle() implementation to locate the problem area:

string[] strArray = command2.Response.Split(",".ToCharArray());

 

rectangle = new Rectangle(Convert.ToInt32(double.Parse(strArray[0], CultureInfo.InvariantCulture)), Convert.ToInt32(Convert.ToDouble(strArray[1], CultureInfo.InvariantCulture)), Convert.ToInt32(Convert.ToDouble(strArray[2], CultureInfo.InvariantCulture)), Convert.ToInt32(Convert.ToDouble(strArray[3], CultureInfo.InvariantCulture)));

3. Then I record http traffic when GetRectangle()  request is processed (used FiddlerCap to do this). And receive next responces:
For Chrome:
"Response":"148.14999389648438,320.1499938964844,319,10"

For Firefox:
"Response":"159.98333740234375,456,undefined,undefined"

According to code above this method crash when try Convert.ToDouble string - "undefined".

Hope, this info will help you to fix this issue in next Telerik release.

Thanks,
Mykola

[Plamen]

Hi Mykola,

Thank you for the additional information. Can you please send us a sample test against the public demo you previously provided?
http://www.highcharts.com/demo/bar-basic

The test should demonstrate the problem you are experiencing with the GetRectangle() method in Firefox. Once I have a repro on this behaviour I'll be glad to file a bug report on your behalf.

All the best,
Plamen
the Telerik team

[Mykola]

Hi Plamen,
Sorry for long delay, I was busy with upcoming release of our application.
Unfortunately I still encountered with this issue, even after hardware update .
My current hardware:
OS: Win 7 x32/64
Browser: Firefox 18.0
TTF: 2012.2.1204.0

Please also note that this issue related only to FF, under Chrome && IE everything works as expected.
Below, you can find code snippet (as you asked) which reproduce this issue.
I little bit hardcoded values, but I am sure you will pick up the idea.

// note start under FF browser
// lets navigate to demo site
ActiveBrowser.NavigateTo("http://www.highcharts.com/demo/bar-basic");
ActiveBrowser.WaitUntilReady();

// get the first chart element
Element firstChart = ActiveBrowser.Find.ByXPath("//svg");

// prepare XPath expression for bar rect column. (blue rect in Africa chart, see attached screenshot)
string barXPath = "//g[@class='highcharts-series-group']//rect[@fill='#4572A7'][1]";
// now find this rect element
Element barElement = firstChart.OwnerBrowser.Find.ByXPath(barXPath);
// try to get it's rectangle
Rectangle barRect = barElement.GetRectangle(); // System.FormatException raised here

So, that's it. I hope this info will help you to solve this issue.
Let me know if you need any other assist from my side.

Thanks,
Mykola

[Plamen]

Hi Mykola,

Thank you for providing the code snipped. I am glad to inform you that our developers were able to find and fix the cause of this issue. The fix is included in our latest internal build 2012.2.1317. You can download it from your Telerik.com account here: Public URL. Please upgrade to that version and let me know if you continue to have difficulty getting the element rectangle in Firefox.

All the best,
Plamen
the Telerik team

[Mykola]

Hi Plamen,

I install the latest internal build 2012.2.1317 as you suggest, but the issue is still present. Can you check if this fix is included to this build ?
And one more thing - is there any ability to get release notes or change list for internal build ?

Thanks,
Mykola

[Plamen]

Hello Mykola,

That's really strange. I have tried this many times today, but as you can see in this video I am unable to reproduce the issue with our latest internal build. I am using the exact same code as you do. Are you getting the same exception after the upgrade? Could you please record a Jing video demonstrating the issue? This may help us to better understand what is happening on your side.

You can check what's new in the new build by opening the Version Notes. Just login to your Telerik.com account and go to:
Manage products > Latest internal builds > version notes.

Here's a direct link: Public URL.

Kind regards,
Plamen
the Telerik team

[Mykola]

Hello Plamen,

My apologies, it was my fault.
I'll double check environment configuration and found root cause.

Actually the issue was in Telerik Testing Framework Firefox extension (that's why GetRectangle continue to raise exception). For some reason this extension does not removed during uninstall process, and as result does not update to newest version when I perform install of latest internal build.

After reinstalling everything from scratch, this issue no more exist.

Thanks again for assist!

Best regards,
Mykola

[Plamen]

Hello Mykola,

I am glad to hear you got it working! Thanks for the update.

Please contact us again if you have further problems.

All the best,
Plamen
the Telerik team