How to check the position of elements on the page?

[Lim]

Hi guys,
Is there a good way to check the position of an element?  e.g. if I have two buttons on a page how can I find out which button is on the left and which one is on the right? or top and bottom?

So far I have found that whichever element is on the left (and I think created first in the visual tree) has a lower AbsoluteTagIndex.  But that really only says which element came first.  So I'm wondering if there's a better way.  

I would love to hear any suggestions about this.  

Thanks.

[Stoich]

Hi Lim,

Let me try to explain how to build such verifications.

Unfortunately there is no easy way around positioning verifications to "visually" tell an element's location. The position of a HTML element is an attribute like any other and you have to build the proper verification for it. In WebUI Test Studio check with the "Sentence Verification Builder" window and all the verifications related to positioning that are grouped together under Styles/Display (see attachment 1) . You will need to build your positioning verification from here. 

However, it gets even more complicated because there are many ways to achieve the same effect when defining an element's position. Here's a practical example to demonstrate this: 
http://www.w3schools.com/Css/css_positioning.asp

In this page there are two DIV elements (see attachment 2): one of the left and one on the right. When you take a look at their style attributes in the DOM Explorer you will notice they are absolutely the same except for the two positioning attributes          : one has --> LEFT: 0px; 
                                                         the other -->RIGHT:0px;

Even though these are different attributes they define the same thing - the positioning and so any positioning verification will have to be based on those 2 attributes. For instance you know that the element with the attribute LEFT:0px is definately the one on the left. 

So basically whenever you want to compare the position of two elements you will have to look at their positioning style attributes and come up with some sort of solution that will only be relevant for you specific case. You will need some knowledge of HTML and CSS.

Also keep in mind that the style attributes on the element may be located in the HTML document's HEAD or even in a separate Style Sheet. 

Check out this tutorial  http://www.w3schools.com/css/css_positioning.asp 
It will give you some very useful basic info about positioning. 

I hope I've managed to answer your question. Please don't hesitate to contact us again if you have any further questions.

Greetings,

Stoich

the Telerik team