two same UI elements, one visible and another one invisible

[c676228]

Hi Folks,

It's been a while since I wanted to ask this question.

Does anybody here have an experience that your company's web UI design tool creates two same UI elements automatically, one is visible and another is invisible? If you use firepath ect., you will see two elements identified with the same id.

Most of the time, Ranorex deals with it fine(with the help of the @visible attribute). However I do experience some issues like, when it could be identified in Spy. But at runtime, it moves to the invisible one or has an issue to find the right one.

I just want to know whether I am the only person for having this issue. Or any tricks to avoid this trap?

Best Regards,

[c676228]

Another question is " what is the purpose behind the scene for the design tool to duplicate the controls?"
As we all know the overhead for delivering duplicated html, css and JavaScript is huge in this kind situation?

[odklizec]

Hi,

I think using 'visible' attribute is the best way how to deal with your problem. However, there could be a problem to identify 'visible' control, if it's actually outside the visible area of screen In this case, visible attribute is useless as well.

I would suggest to carefully examine xpaths and properties of both controls and try to find other differences you could use to identify the 'visible' element. If there are no differences, then your only hope is probably to use index, which would tell Ranorex to use particular element with given index. But using index is highly unstable and risk way of identifying controls.

OK, yet another thing you could try is to identify the problematic element based of neighboring/parent element. Could you please upload Ranorex snapshot of the problematic element, ideally, it should contain both visible and invisible element.

[c676228]

Hi Pavel,

Thanks for your reply. I am aware what you said. I will have a discussion session with Ranorex support.
Due to the company's policy, I cannot upload any code to public site. Sorry about that.

As I noticed, the xpath for firepath is very short and effective. For example, you have an xpath like this in Ranorex:
.//div[#'main-actions_container']//dd/div/div[@id='xyz']/button[@visible='True'], it can identify the element.
No problem. However, when you shorten the xpath to .//div[@id='xyz']/button[@visible='True'] then Ranorex no longer finds the original element. it will say "No elements found for current selection"(Due to duplicate elements issue, I think.). If you remove @visible='True', it won't highlight the visible one, it will say "one element found" in Spy. It seems that Ranorex Spy locates the invisible one.
The similar situation happens in runtime too. Both these two issues happen when the element actually is in view.

However, if you use firepath, the following
.//*[@id='devices-filter-types']/button
It seems that it can highlight the original element without any issue.

[odklizec]

Hi,

Well, without snapshot, it's pretty hard to suggest something reliable.

BTW, what's the problem with this path then?...

.//div[#'main-actions_container']//dd/div/div[@id='xyz']/button[@visible='True']

If I understand you right, the element is found as expected with this xpath? Since there is an unique ID in this path, I would suggest to keep it there, because it makes the search for an element noticeably faster and much more reliable. On the other hand, using this xpath...

.//div[@id='xyz']/button[@visible='True']

is not a very good idea, because it may take too long to find the element and eventually, it may return multiple elements as well. Simply, this xpath is too vague and Ranorex needs to go through too many elements to find the proper one. If you need to make the original xpath even a bit shorter, use this xpath instead...

.//div[#'main-actions_container']//div[@id='xyz']/button[@visible='True']