Page 1 of 1

Not finding class when using Angular and Bootstrap

Posted: Wed Dec 10, 2014 3:53 pm
by JSH_QA
We are encountering a situation where our test code (C# + Ranorex API, using 5.2.1) is failing to find an object that is clearly visible using Ranorex Spy, or the F12 Developer Tools in browsers.

In the attached screenshot of Ranorex Spy, we are trying to find the ATag 'Output' circled at the bottom of the hierarchy. However, if we include the 'nav-tabs' class (also circled) in our RxPath, our code fails to find the element. The moment we remove the check for 'nav-tabs' everything works as expected.

The system that we are testing uses Angular and Bootstrap. Our testing is initially done using Internet Explorer (both v10 and v11), both of which fail to find the element when we include 'nav-tabs'. This is running on Windows 7, 64 bit.

Any ideas or suggestions (other than just removing the check for the class from the RxPath)? We would like to understand the issue, so that we can be certain we do not have similar problems elsewhere.
Untitled.png
Note that I have edited the screenshot to remove details of machine, domain and product name.

Many thanks,

John H.

Re: Not finding class when using Angular and Bootstrap

Posted: Wed Dec 10, 2014 4:18 pm
by krstcs
Could you post the full (masked if necessary) XPath you are using?

Could you have put the a tag directly under the ul tag in the XPath, like "\ul\a" instead of "\ul\?\a" or "\ul\li\a"?

Re: Not finding class when using Angular and Bootstrap

Posted: Thu Dec 11, 2014 10:52 am
by JSH_QA
The path that was originally being used was as follows:

"./div[@class~'wrapper-content']//div[@id='tabColumn']/div[@class~'dashboard-header']/div[@class~'panel']//ul[@class~'nav-tabs']/li[@id='outputTab']";

That failed, but as soon as the [@class~'nav-tabs'] was removed, it then worked.
Other paths were tried, but in each case, removing the [@class~'nav-tabs'] made the difference.

When the same paths (including the [@class~'nav-tabs']) are entered in Spy, there it works, so we are wondering if there might be something in the way that Angular/Bootstrap/CSS work in combination that means that our tests (using the Ranorex API) see the DOM before some update happens that Spy then sees the results of. Is that possible?

Thanks,

John H.

Re: Not finding class when using Angular and Bootstrap

Posted: Tue Dec 16, 2014 11:01 am
by Support Team
Hello John,

I am not sure if I understand your issue correctly, but as krstcs wrote you can just remove the [@class~'nav-tabs'] string in your path.

For example:
.....//ul/li[@id='outputTab']";

If this doesn't work please post two Ranorex Snapshot files in order to give us more information about your application.
One Snapshot file from your application when the element can be found and the second snapshot when the element cannot be found using the same RanoreXPath.
A detailed description how to create a Ranorex Snapshot file can be found in the section Creating Ranorex Snapshot Files

Regards,
Bernhard