In Selenium test automation, if webobject properties does not have id, name, class then we left with 2 options-

Option 1 Calculate xpath

Option 2 Calculate CssSelector

In this post, we will learn how to form xpath and various XPath expression for webobjects whose attributed are changing dynamically.

There are 2 types of xpath method

1- Absolute xpath- It is not recomended, as its not optimized and contains full path from a top node which is unique. It increases failure chances as a lot of dependencies are there.

Syntax example- html/body/div[2]/div[4]/div/div/div[1]/div/div/div/div/div[1]/div[1]/div/a

2- Relative xpath- Most preferred, As it is optimized and lesser chances of failure are there, its represented something like-

Relative xpath: //*[@class=’tst-Search’]/td

Xpath representation-

.//tagname[@attribute=’Value’]

//– Current node

tagname– Every html web object is tagged to tag which is div, image, input, button etc

@– Attribute selection

Attribute – Name of attribute like class, type etc

Value– Value of attibute- given by html designers.

Ther are couple of tools to find xpath-

1- firebug– in firefox browser

2- firepath– in firefox browser

3- chropath– in chrome browser

We will see how to find xpath in chrome browser-

1- Click on top right and then select more tools, in your chrome browser, as shown in below image-

Select on Control + ‘F’ using keyboard keys, you will get highlighted text where xpath can be written and validated. Chrome browser highlights the correct result in User Interface.

 

 

Let’s start formulating Xpath

We will be using
https://opensource-demo.orangehrmlive.com/ for xpath examples-

First case is UserName Xpath-

Text contains string ‘Value’
Xpath=//*[contains(@type,’Value’)]

Summary of User Name text box

1- Xpath calculated as- .//input[@id=’txtUsername’]

2- check the right rectangular highlighted part, which says 1 of 1, which means 1 object is returned by above xpath.

Second- contains method

Text contains string ‘Value’
Xpath=//*[contains(@type,’Value’)]

Contains method

Above image is explained below-

1- Marked 1 rectangular box is the object whose X-Path is required.

2- Marked 2 in rectangular box is Xpath – //*[contains(@id,’logInPanelHeading’)]

3- Marked 3 in rectangular box is result which says its returning 1 of 1. which means 1 object is returned.

How to use start with opetor

Please refer below where startes with example is taken

Starts-with

1- First rectangular box, is Target weblink whose xpath is required.

2- Second highlighted box contains xpath which is-//div[starts-with(@id,’forgot’)]/a

Now an Interesting thing in above xpath is I have added “/a” which is basically traversing to the exact element, else during script execution it might fail.

Using logical operator- AND/OR

1- Formulae to calculate using AND is-

Xpath=//*[@type’Vale’ AND @name=’val2′]

2- Formulae to calculate using OR gate is –

Xpath=//*[@type’Vale’ OR @name=’val2′]

Text contains value which is inside td

Please refer below image where we are trying to get “Login Portal” text in Login Page-

Contains text() method

1- Rectangular box 1- is target web element whose xpath is required.

2-Rectangular box 2 is Xpath which is- //div[text()=’LOGIN Panel’]

Summary

Above explained method and different ways of finding xpath , there are 50+ ways of calculating xpath.

Xpath Axis is also a very important concept for an automation tester to understand, i will publish Xpath Axis methods in my upcoming blogs