>> XPath

XPath

XPath is a locator to locate elements on a web page. XPath is a powerful locator to find simple to complex and dynamic elements on a webpage.

Syntax:

XPath = //tagname[@attributeName=’attributeValue’]

Or

XPath = //tagname[contains(@attributeName,’attributeValue’)]

The tagname can be replaced by  " * " as below , however, to maintain the uniqueness using the tagname is preferred/suggested :

XPath = //*[contains(@attributeName,’attributeValue’)]

Absolute and Relative XPath

1.     Absolute XPath 

Absolute XPath starts from the root with the single forward slash ‘/’ , ie , root node.

Such as , the absolute XPath of facebook “userID input” text box is :

/html/body/div/div[2]/div/div/div/div/div[2]/form/table/tbody/tr[2]/td/input[@id='email']

The disadvantage of absolute XPath is , it is long  and if anything changes in the path , the XPath does not work .

Absolute Xpath

2.     Relative XPath

Relative XPath is shorter and more reliable XPath . It starts from somewhere middle of the page HTML DOM , from wherever the shortest and unique locator can be formed.  It starts with double forward slash ‘// ’

For example, the relative XPath of facebook “UserID input” text box is :

//input[@id='email']

Relative Xpath

Different ways of writing relative XPath:

1.     Using equals sign “=”

In this , we use @attributeName = ‘attributeValue’

Syntax :

XPath = //tagname[@attributeName= ‘attributeValue’]

such as:

//input[@id='email']  ---- to locate userID input text box in Facebook.com

You can use any available attribute or combination of attributes in the HTML to locate the element , the XPath should be unique and should select the intended element only.

To select the same element , we can write XPaths in many ways like below. All these select/locate the same element "userID input" text box :

//input[@id='email']

//*[@name='email']

//input[@name='email']

//input[@type='email']

//input[@data-testid='royal_email']

Below xpath will locate Facebook SignUP button

//button[@name='websubmit']

Facebook SignUP button

2.     Using “contains”

While writing XPath, “contains” is used most of the times.

Syntax:

XPath = //tagname[contains(@attributeName,’attributeValue’)]

Such as :

//input[contains(@id,'Id')] --- to locate "userID input" text box in gmail.com

Below XPaths will select/locate the same element.

//input[contains(@name,'ident')]

//input[contains(@aria-label,'phone')]

//*[contains(@aria-label,'phone')]

//*[contains(@aria-label,'Email')]

XPath contains example

3.     Xapth for dynamically changing attribute values:

Suppose we have attribute name and values like below :

Id = “XYZ-3M8765”

in above attribute value(value of Id), let’s guess that the number 8765 is dynamic, ie, this value is different( changes ) everytime the page is run or loaded.

In such situation XPath is written like below  using "contains" and taking the non-dynamic portion only.

//input[contains(@Id,'XYZ-3M')]

4.     Using ‘and’ in the XPath 

xpath can have more than one attribute name/value combinations. When "and" is used between the combinations, all the combination should be true to make the xpath work. Sometimes writing xpath with only one attribute name/value will returns more than one matches . To locate a particular element, the xpath should not be returning more than one matches ie there should be one match only , ie, the xpath should be unique. In such situations , when there are more than one matches, we add more attributes(name/value combinations) with "and" to make the xpath unique. And the xpath works only when all the  attributes(name/value combinations) connected by "and" are true.

Syntax:

XPath = //tagname[@attributeName1=’attributeValue1’ and @attributeName2=’attributeValue2’  ]

Or

XPath = //tagname[contains(@attributeName,’attributeValue’) and contains(@attributeName,’attributeValue’)]

Or

XPath = //tagname[@attributeName1=’attributeValue1’ and contains(@attributeName,’attributeValue’)]

Or

XPath = //tagname[contains(@attributeName,’attributeValue’) and @attributeName2=’attributeValue2’  ]

Example:

To locate "FirstName" input text box in the facebook.com , if we use below XPath we get more than one matches , in below picture the XPath has found 8 matches.

//input[contains(@class,'inputtext')] --- 8 matches

xpath showing more than one matches

The intended element(here FirstName text box) could be 1st match or 2nd match or any other matches.

To make unique XPath in such situation, we can use "and" like below adding additional attributes. Below XPaths have found one match only.

//input[contains(@class,'inputtext') and contains(@name,'first')] 

or

//input[@class='inputtext _58mg _5dba _2ph-' and @name='firstname']

or

//input[contains(@class,'inputtext') and @name='firstname']

or

//input[@class='inputtext _58mg _5dba _2ph-' and contains(@name,'first')]

5.     When the XPath is showing more than one matches , and you are still using that XPath :

, in this situation the code will locate the first matched element. And if the first matched element is not the one you want to locate then your code will fail. But if your intended element is the first matched element, then your code will not fail because that is the right element you want to locate on the web page.

For example , in above example there are 8 matches with below XPath :

//input[contains(@class,'inputtext')]

The first match is the UserID input text box . If you want to locate this text box then you are good with this XPath also. But if you want to locate password input text box or first name input text box then , your code will fail.

6.     Using “text()”:

Sometimes there is no attribute name or values. Only text are available/present to locate an element.

Syntax:

XPath = //tagname[text()=’text’]

Or

XPath = //tagname[contains(text(),’text’)]

For example in below picture , you want to locate the text “Email or phone”  but if you see the HTML for the text , there is text "Email or Phone" without attribute name and attribute value. In such situations, you can write XPath like below :

//label[text()='Email or Phone']

or

//label[contains(text(),'Email')]

If you want to use text without attribut, you can use above xpaths. But if you see in the HTML , there is one attribute name and value also present and if you want to use the attribute , you can write xpath like below to locate the element(text):

//label[@for='email']

But in real time working condition, you will find situations where there is no attribute at all and in those situations, you have to use text() only if it is feasible. 

xpath using text()

7. "or" in xpath:

XPath can have more than one attribute name/value combinations. When "and" is used between the combinations, all the combination should be true to make the xpath work.

For example : 

XPathAND =  //tagName[@attributeName1='attributeValue1' and @attributeName2='attributeValue12' and .....]

XPathAND will work only when all the xpath connected by "and" work.

"or" is also used between the attribute name/value combinations. When "or" is used, the xpath works if at least one attribute Name/Value combination is true/works.

For example : 

XPathOR =  //tagName[@attributeName1='attributeValue1' or @attributeName2='attributeValue2' or  @attributeName3='attributeValue3' or .....]

The xpath  XPathOR  works if at least @attributeName1='attributeValue1' is true or  @attributeName2='attributeValue2' is true or @attributeName3='attributeValue3' is true or any other combination used in the xpath connected by "or" is true.

you can use "or" to combine different combination of attribute name and values as mentioned below. Below examples have taken only two attribute name/value combination, you can take any number of attribute name/value combination as required connected by "or".

//tagName[@attributeName='attributeValue' or @attributeName1='attributeValue1']

//tagName[contains(@attributeName,'attributeValue' ) or @attributeName1='attributeValue1']

//tagName[contains(@attributeName,'attributeValue') or contains(@attributeName1,'attributeValue1')]

//*[contains(text(),'text') or contains(@attributeName1='attributeValue1')]

//tagName[@attributeName='attributeValue' or contains(@attributeName1,'attributeValue1')]

//tagName[@attributeName='attributeValue' or text() ='text']

//tagName[text() ='text' or @attributeName='attributeValue']

etc.

Sometimes we require to write xpath where at least one of the given attribute(name/value) combination works so that the xpath locates  the intended element. In such situation, we use "or". However, while using "or" make sure that there should not be more than one matches of xpath. The xpath, which is made connecting more than one xpath by using "or", should be unique , ie, it should return one match( ie element) only. There is possibility that two or more xpath when connected by "or", shows more than one match.

8. "following" sibling in xpath:

To use "following " sibling ,  we first locate a  working xpath(element, reference xpath)  which is close to that intended element and then locate other xpaths(elements) following that working xpath with the reference of that working  xpath.  On the webpage, the working xpath(ref. xpath) should come first and the intended xpath should follow that working xpath(ref. xpath).

Syntax :

nearest_working_xpath//following::Intended_xpath  (ie, xpath of intended element).

Sometimes we need more than one "following" siblings, such as :

nearest_working_xpath//following::xpath_in_the_middle//following::Intended_xpath  

nearest_working_xpath//following::First_xpath_in_the_middle//following::Second_xpath_in_the_middle//following::Intended_xpath 

and so on.


Example:

"News" and "Images" following "All"

Let’s locate an element “All ” tab on the web page, bing.com ,  with below xpath:

//a[contains(@h,'5016')]

The xpath for next tab “News” can be written, using "following",  taking "All" as reference xpath will be as below :

//a[contains(@h,'5016')]//following::a[contains(@h,'5020')]

The xpath for next tab “Images” can be written, using two "following" taking "All" as reference xpath will be as below :

//a[contains(@h,'5016')]//following::a[contains(@h,'5020')]//following::a[contains(@h,'5017')]

“following” is used taking reference of the nearest working xpath(ref.xpath which comes before the intended xpath on the web page). So, if xpath of “News” is working  then to locate “Image” tab, you do not need to use two “following” siblings ,ie, you do not need to take reference of "All" tab.  You can directly use xpath of "News"(nearest xpath/element ) like below. ( Above  xpath using two "following" siblings is mentioned here even though two "following" are not required , since the xpath for "News "(which is nearest to the intended “Image” tab) is a working xpath, is just to let you know or show to you how we can use more than one "following")

So when taking "News" as the reference xpath , the xpath for "Image" will be as below:

//a[contains(@h,'5020')]//following::a[contains(@h,'5017')]

So the number of “following” depends upon how far is the working xpath from the required element.

9. "preceding" sibling:

This is opposite of “following”.  In this the nearest working xpath(ref.xpath) comes after the intended xpath , ie, the ref. xpath follows the intended xpath on the web page. The xpath for intended element is found with the reference of the nearest working xpath , ie, the ref. xpath.

Syntax :

nearest_working_xpath//preceding::Intended_xpath  (ie, xpath of intended element).

Sometimes we need to use more than one "preceding" siblings, such as :

nearest_working_xpath//preceding::xpath_in_the_middle//preceding::Intended_xpath  

nearest_working_xpath//preceding::First_xpath_in_the_middle//preceding::Second_xpath_in_the_middle//preceding::Intended_xpath 

and so on.

Example:

"All" and "News" preceding "Image"

Let’s locate an element “Image” tab on the web page, bing.com ,  with below xpath:

//a[contains(@h,'5017')]

Now, let's suppose that "News" is the intended tab which is infront of "Image" tab.

The xpath for the “News” tab can be written, using "preceding",  as below :

//a[contains(@h,'5017')]//preceding::a[contains(@h,'5020')]

Now, let's suppose that "All" is the intended tab.

If we take reference of "Image" tab , then the xpath of "All " tab will be :

//a[contains(@h,'5017')]//preceding::a[contains(@h,'5020')]//preceding::a[contains(@h,'5016')]

“preceding” is used taking reference of the nearest working xpath(ref.xpath which comes after the intended xpath on the web page). So, if xpath of “News” is working  then to locate “All” tab, you do not need to use two “preceding” siblings ,ie, you do not need to take reference of "Image" tab.  You can directly use xpath of "News"(nearest xpath/element ) like below. ( Above  xpath using two "preceding" siblings is mentioned here even though two "preceding" are not required , since the xpath for "News "(which is nearest to the intended “All” tab) is a working xpath, is just to let you know or show to you how we can use more than one "preceding")

So when taking "News" as the reference xpath , the xpath for "All" will be as below:

//a[contains(@h,'5020')]//preceding::a[contains(@h,'5016')]

So the number of “preceding” in a xpath depends upon how far is the working xpath from the intended element.