Web Element / Object locators:
We have the below mentioned ways to identify a web element on a web page.
1) ID -1st preference
2) Name – 2nd preference
3) CSS Selector –looks same as X-path. Mainly used for IE browser related automation as it is very fast in IE
compared to other browsers.
4) X-path – mainly used when there is a problem with the attributes of an element. Compared to ID, it’s not
good to use X-path, Because Xpath itself calls functions which causes performance issue.
5)tagname
6)link text
7)partial link text
8)class name
What is object / Web Element identification?
It’s nothing but identifying a web element with their backend attributes.
<html>
< body >
<input id=’1’ value=’placeholder’ class = ‘input_Class’/> //tagname[@attribute_name =
‘attribute_value’ and @attribute_name=’attribute_value’]
//input[@value=’ ’placeholder’’]
<label>Search</label> //tagname[text()=’text_value’] //label[text()=’ Search’]
</body> //tagname[@attribute_name = ‘value_of_the_attribute’]
//tagname[text()=’value_of_the_text’]
</html>
1st preference should always be given to ID .
Xpath :
It’s also called as XML path. It is of 2 types.
1) Absolute x-path
2) Relative x-path
1) Absolute x-path (/): It is the direct way to find the web element. It always starts from root node (html) and
ends with child node (web element we need to identify). It is generated by the fire path.
Disadvantage:
It’s not good for dynamic object identification. If there are any changes made in the path of the element then
the object identification with that XPath gets failed.
Let’s take an example of flight search from BLR to DEL. First time it gave 1000 results and I’m identifying 900th
result using absolute x-path. Second time when search for the same Sector it is giving only 800 results, that
time my script will fail as it tries to identify the 900th result which was not there.
2) Relative x-path (//):
For Relative Xpath the path starts from the middle of the HTML DOM structure. It starts with the double
forward slash (//), which means it can search the element present anywhere in the webpage. It’s generated by
us only and is very good for dynamic object identification.
Syntax to write Relative x-path:
//tagname[@attribute_name=’value’]
<input src=’input1’logo=’zyz’/>
//input[@src=’input1’]
//tagname[@attributename1=’value’ and @attributename2=’value’]
Ex: //input[@id=’1’ and @value=’placeholder’]
[ ] -> this is to mention the attribute of the element we want to identify.
/ -> this is to go to immediate child node of the current element
// -> this is to for any child of the current element.
Ex: //div[@class=’ok’] / a
<html> parent
<header>hi</header> child
<body> child
<a>hi</a>
<div class=’ok’> //div[@class=’ok’]/a
<a>hi</a>
</div>
</body>
</html>
Where ‘div’ is the parent node , ‘class’ is the attribute of ‘div’ and ‘a’ is the child node of ‘div’
X-path functions: some times what will happen is there might not be having any attributes for some of the
web elements or some part of the attribute might changes dynamically. So in order to overcome the
disadvantage and to identify the elements comes in that category, we have the better solution called x-path
functions.
1) text() : this is mainly to identify any visible text on the UI.
Syntax: //htmltag[text()=’text value’]
Ex: <html>
< label> Flight Search </label> //label[text()=’Flight Search’]
</html>
In the above example there is a web element whose text is “Flight search” and it doesn’t have any attribute.
In that case we have to make use of the above mentioned function. X-path to identify the above element is as
below:
//label [text()=’Flight Search’]
Drawback: If there is any space present before or after the text value and if we don’t provide the exact space
in our x-path , script will fail. To overcome this disadvantage we have another function which is mentioned as
below.
2) normalize-space ():
Syntax: //htmltag[normalize-space(text())=’value’]
Ex:<html>
<label> Flight Search123 </label>
X-path to identify the above element is as mentioned below:
//label[normalize-space(text())=’Flight Search’)]
Generally , normalize-space will remove the spaces present on both sides of the text and compare with the
text value mentioned and identify the element.
Drawback: The main drawback is that we cannot identify an element with partial text , we have to specify the
complete text.
3)contains(): to identify an element using and attribute’s partial value or using it’s partial text value.
Syntax1://htmltag[contains(text(),’value’)]
Syntax2://htmltag[contains(@attributename,’value’)]
Ex: <html>
<label> Flight Search </label>
<a id=’anchor tag’> Search </a>
X-path to identify a label contains Flight is as mentioned below:
//label[contains(text(),’Flight’)]
X-path to identify an element having id as anchor tag.
//a[contains(@id,’anchor’)]
4)starts-with(): to identify an element whose attribute’s / text’s 1st part is constant and other part keep on
changes .
Syntax://htmltag[starts-with(@attributename,’value’)]
Ex:<html>
<button id=’btn1242535235’/>
<button id=’22353252btn’/> //button[ends-with(@id,’btn’)]
</html>
In the above example , Button’s id keep on changes , the only constant part is ‘xyz’. In this case we have to use
the below x-path.
//button [starts-with(@id,’xyz’)]
5)ends-with(): to identify an element whose attribute’s or text’s last part is constant and the other part keep
on changes.
Syntax://htmltag[ends-with(@attributename,’value’)]
Ex:<html>
<button id=’1242535235xyz’></button>
</html>
In the above example, Button’s id keep on changes, the only constant part is ‘xyz’. In this case we have to use
the below x-path.
//button [ends-with (@id,’xyz’)]
Dependency between web elements:
Handling Parent – child relationship: It will come into picture when there exists a relationship (dependency)
between the web elements.
Ancestor
Parent
Preceding- sibling Web Element following-sibling
Child
Descendent
Parent: Take the below example from Flight search history which contains set of results , After each result
there should be a row to display the total fare and Fare Breakdown. To identify whether Total Fare and Fare
Breakdown displayed for all each and every result, first we have to identify the Flight details row and then we
need to identify its parent, now we need to check whether the Total fare is displayed or not based on the
parent.
<html>
<body>
< input >
<label>Search</label> //label[text()=’ Search’]/parent:: input
</input>
</body>
//tagname[@attributename=value]/parent::tagNameOfParent
Child: To check whether price value web element is displayed for Total Fare, we have to identify the Total Fare
element then we need to identify its child. In the below example, <div> is the node for Total Fare and span is
under div which has the value for total fare.
//tagname[@attributename=value]/child::tagNameOfChild
Following-sibling:
//tagname[@attributename=value]/following-sibling::tagnameOfFollowing-sibling
<html>
<input id=’username’/>
<button>search</button> //input[@id=’username’]/following-sibling:: button
<img id=’gmail’/> //img[@id=’gmail’]/preceding-sibling::img
</html>
Preceding-Sibling:
//tagname[@attributename=value]/preceding-sibling::tagnameOfPreceding-sibling
Ancestor:
To identify a node’s parent’s parent and using that will identify it’s child or siblings.
//tagname[@attributename=value]/ancestor::tagname
Descendent:
To identify a node’s grandchildren will use this.
//tagname[@attributname=value]/descedent::tagname
Following:
//tagname[@attributename=value]/following::tagname
Preceding:
//tagname[@attributename=value]/preceding::tagname
<html>
<body>
<label>username</label> preceding-sibling for input //label[text()=’username’]/following-sibling::
input
<input id=’123’/>
<label>pwd</label> following sibling for username input //label[text()=’pwd’]/preceeding-
sibling::input
<input id=’432’/>
</body>
</html>
<html> root node
<body>
<div id=’xyz’> parent , input , label , button are childs for div
<input id=’search’/> input , label and button siblings to each other
<label>search value</label>
<button name=”btn1”/>
</div>
</body>
<html>