Relative / Absolute Xpath

Types of Xpath

Relative Xpath

Relative xpath starts from the middle of DOM. It start with double slash(//), which mean it can search from anywhere in DOM.

Absolute Xpath

Absolute xpath start from the root of element to get the desire result. If there is any minor change in DOM structure then absolute xpath will not work, hence people mostly use Relative xpath to avoid xpath related issues.

Xpath Details

Xpath is combination of Tag, attribute and it’s value. below are some ways and technique of writing xpath.

Single slash- 

Single slash is used to find out immediate next element.
Example-

Xpath Example-

//div[contains(@class,'comment')]/div

In above example, for single result which is immediately next element for class having text as “comment”.

Double slash- 

Double slash is used to find all related element in DOM.
Example-

//div[contains(@class,'comment')]//div

In above example, it will find below two result for the class having text as “comment”

Single attribute- 

Below is the example of single attribute. Where we have use” id” one single attribute

//div[contains(@id,’password’)]

Multiple attribute - 

Below is the example of multiple attribute, where we have used “id” and “class” as two attribute.

//div[contains(@class,’username’)][contains(@id,’password’)]

and Operator - 

“and’ operator is used to find value of two attribute. Operator should be in small letters.

//div[contains(@class,’username’) and contains(@id,’password’)]

OR Operator - 

This operator  is used to check any of the attribute value available in DOM.

//div[contains(@class,’username’) or contains(@id,’password’)]

contains() -

‘contains’ operator check for any matching text available for the attribute value.

//div[contains(@class,’username’)]

Not contains() - 

This function used to exclude the specific element from the search criteria.

//div[not (contains(@class=’username’))]

EqualsTo(=) - 

“=” sign is used to find out exact match available for attribute value.

//div[(@class=’username’)]

starts-with() -

starts-with is same like contains(), the only difference is, this function match the starting text and fetch the result.
In below example, there are 4 records of div, but it will select those element which start with “col”

//div[starts-with(@class,'col')]

text() -

text() attribute is used to find text elements in DOM

//div[(text()=’username’)]

last() -

This function find last element from the list of nods.

//div[contains(@id,'bg')][last()]
//div[contains(@id,'bg')][last()=1]

position() -

This function is used to find specified positioned element from the list of elements.
For example- In below example find element as the 2nd position.

//div[contains(@id,'bg')]//div[position()=2]

index() -

This function is same as position() function where index number can be mentioned to get specific element.

//div[contains(@id,'bg')]//div[2]

Following xpath - 

This function is used to find out immediate next elements of the component.

In below example, following button element  is selected.

//input[@type='password']//following::button

Preceding xpath.

This function is used to find out immediate preceding elements of the component.

In below example, preceding of submit button element selected.

//button[@type='submit']//preceding::input

Child - 

This function is used to find immediate following element within the selected tag.

For example, in below screen shot, 4 node of “tr” tag  has been selected.

//form[@name='register']//child::tr

Parent(/..)

This function can be used to get the parent tag

//form[@name='register']//parent::td

OR

//form[@name='register']//..

Ancestors

This function is use to select all parent and grand –parent element of the nod.

//form[@name='register']//ancestor::table

Descendants - 

This function is used to get child and grandchild of following nod.

//form[@name='register']//descendant::tr

Pipe line”|” -

This function is used to execute adding xpath query to get the multiple result.

In below example, there are two queries – first one to find “tr” tag elements and another footer class.

//form[@name='register']//tr | //div[@class="footer"]

Sub-String - 

Sub-String can be used to find out last word of the text.

substring(@id, string-length(@id) - string-length('register') +1) = 'register'