XPath in Selenium WebDriver





XPath in Selenium Web Driver will describe the importance of the XPath in Selenium automation.It is very common that when you want to automate any application the most important thing is to identify the element to interact with it. Particularly when you using Selenium as your automation tool, explicitly you have to identify the element on web page. There are so many ways to identify the elements in Selenium and those are called locators. One of the most used and popular locators is XPath.

XPath (XML Path Language),  is a query language for selecting nodes from an XML document. The XPath language is based on a tree representation of the XML document, and provides the ability to navigate around the tree, selecting nodes by a variety of criteria.

XML contain one or more elements/tags/nodes, an element may contain content/data or may contain other elements as child nodes. Each element should have starting tag and ending tag. The element content will reside in between these two tags. Apart from the content each tag  may have attributes. These attributes will give extra information about the element.

Below is the sample XML:

 
<automation>
      <selenium type="opensource">
          <webdriver>
             Open Source Automation Testing Tool.
          </webdriver>
      </selenium>   
      <qtp type="licenced">
      </qtp>
 </automation>

Brief information about the above XML:

  1. <automation>, <selenium>, <webdriver&> and <qtp> are the tags/nodes/elements.
  2. <automation> is the root tag.
  3. <automation> have 2 child nodes called <selenium&gt; and <qtp>.
  4. <webdriver> is the child of <selenium> and grand child of <automation>.
  5. <webdriver> have content (i.e. Open Source Automation Testing Tool.).
  6. <qtp> does not have any content.
  7. type is an attribute of the element and it will give extra information about the element.





XPath is a way of identifying the element on web page. In simple words, finding address of an element on the web page. You can use so many ways to identify the element using XPath. In the XML, starting node is called as root node or context node.

XPath in Selenium Web Driver has 2 types to identify the element:

  1. Absolute XPath
  2. Relative XPath

1.1 Absolute XPath:

  1. Absolute XPath starts with the root/context node (i.e. html) as html is the starting tag of any web application or with the single forward slash(i.e. / )
  2. Writing Absolute XPath is very easy.
  3. It identifies the element very fast.
  4. Apart from the advantages, there are few disadvantages also.
    • You can not recollect or remember for which element you have written this XPath.
    • This XPath may broke once an extra element is added in between or an element is removed in between.

Example:

Absolute Xpath

in the above image the absolute XPath is :

html/body/section/div/div/div[1]/form/div[1]/div[1]/input

we can observe some of the div tags had [1] as suffix. It indicates that if a parent node have the multiple same child nodes, then this number indicates the child number. In this case this is the first div in the child nodes.




1.2 Relative XPath:

  1. Relative XPath starts with any of the element which we want.
  2. Relative XPath will not starts with the root node.
  3. Writing Relative XPath is bit time consuming.
  4. The chances of failing Relative XPath is very less i.e. the way we construct the XPath.
  5. It will start with the double forward slashes i.e.(i.e. // )
  6. It will not be long as absolute XPath.

Example:

Relative Xpath

In the example, the relative XPath is:

//*[@id=’basicBootstrapForm’]/div[1]/div[1]/input

Here, XPath starts from “form” tag to identify the element. We can observe a ‘*’ after the double forward slash, that indicates it might be any element in the XML. It will search all the elements in the XML. To fasten the search of the element we can use the specific element tag instead of this ‘*’.

Here, in this example we can replace the ‘*’ with “form” tag as the XPath is starting from the “form ” tag. It searches all the form tags for the element instead of all the tags.

relativeXpathWithoutStar

We can identify the elements using attributes in the Relative XPath. Tags may contain attributes to specify what kind of element it is. A tag can contain a single attribute or multiple attributes.

By using below methods we can identify the elements uniquely:

  1. Single Attribute
  2. Multiple Attributes
  3. Contains
  4. Starts-With
  5. Text
  6. Ancestor
  7. Preceding
  8. Descendant
  9. Following





Single Attribute:

By using single attribute also, we can identify the element.

//tagName[@attribute=’attributValue’]

Example:

relativeXpathwithSingleAttribute

In the example, the relative XPath is:

//input[@name=’firstName’]

Multiple Attributes:

Sometimes single attribute may not help to identify the element. Then we can make use of multiple attributes to identify the element uniquely on the web page.

//tagname[@attribute1=’attribute1Value  and @attribute2 = ‘attribute2Value’] or

//tagname[@attribute1=’attribute1Value][@attribute2 = ‘attribute2Value’]

Example:

relativeXpathwithMultipleAttributes

In the example, the relative XPath is:

//input[@name=’firstName’  and @placeholder = ‘First name’] or

//input[@name=’firstName’][@placeholder = ‘First name’]

Contains:

We can use contains method to identify the element.

//tagName[contains(@attribute,’partialAttributeValue/fullAttributeValue’)]

Example:

relativeXpathUsingContains

In the example, the relative XPath is:

//input[contains(@name,’first’)]

Starts-With:

We can use starts-with method to identify the element.

//tagName[starts-with(@attribute,’partialAttributeValue/fullAttributeValue’)]

Example:

relativeXpathUsingStartsWith

In the example, the relative XPath is:

//input[starts-with(@name,’first’)]




Text:

We can use text method to identify the element.

//tagName

 

Example:

TextMethod XPath in Selenium WebDriver

In the example, the relative XPath is:

//label

 

Ancestor:

Selects all ancestors (parent, grandparent, etc.) of the current node.

Example:

AncestorMethod XPath in Selenium WebDriver

In the example, the relative XPath is:

//label

//ancestor::div

Preceding:

Selects all nodes that appear before the current node in the document, except ancestors, attribute nodes and namespace nodes.

Example:

PrecedingMethod XPath in Selenium WebDriver

In the example, the relative XPath is:

//label

//preceding::div

Descendant:

Selects all descendants (children, grandchildren, etc.) of the current node.

Example:

DescendantMethod XPath in Selenium WebDriver

In the example, the relative XPath is:

//*[@id=’basicBootstrapForm’]//descendant::div

Following:

Selects everything in the document after the closing tag of the current node.

Example:

FollowingMethod XPath in Selenium WebDriver

In the example, the relative XPath is:

//*[@id=’basicBootstrapForm’]//following::div

Conclusion:

Here the conclusion is, need to identify the element uniquely on the web page to interact with exactly. The above are the only examples to demonstrate. Those XPath will vary depends on the application and how the XML is written.

Please watch youtube video for better understanding.




Related Posts