Double Slash ' // ' After Double Slash ' // ' In XPath

Double Slash ' // ' only selects all the nodes that are descendants of the matching nodes including the matching nodes themselves.

XPath having Double Slash ' // ' after Double Slash ' // ' is given below:

//div//span

For Example:

<div id='div_one'>
   <span id='span_one' />
   <div id='div_two'>
      <span id='span_two' />
   </div>
</div>

<div id='div_three'>
   <ul>
      <li>
         <span id='span_three' />
      </li>
   </ul>
</div>
<div id='div_four'>
   <p>
      <span id='span_four' />
   </p>
</div> 

Here, If we use '//div//span' XPath then we will get four 'span' nodes.

Why?

• For '//div' we will get four div node (div_one, div_two, div_three & div_four) because Double Slash ' // ' selects all the nodes that are descendants of the matching nodes including the matching nodes themselves.
• For '//span' we will get four span node (span_one, span_two, span_three & span_four) as span_one, span_two, span_three & span_four are the descendants of each of the div nodes (div_one, div_two, div_three & div_four) which were selected previously (by '//div').

Double Slash ' // ' Before Single Slash ' / ' In XPath

Double Slash ' // ' only selects all the nodes that are descendants of the matching nodes including the matching nodes themselves. Single Slash ' / ' only selects all the nodes that are the child of the matching nodes.

XPath having Double Slash ' // ' before Single Slash ' / ' is given below:

//div/span

For Example:

<div id='div_one'>
   <span id='span_one' />
   <div id='div_two'>
      <span id='span_two' />
   </div>
</div>

Here, If we use '//div/span' expression then we will get two 'span' nodes.

Why?

• For '//div' we will get two div node (div_one & div_two) because Double Slash ' // ' only selects all the nodes that are descendants of the matching nodes including the matching nodes themselves.
• For '/span' we will get two span node (span_one & span_two) as span_one is the direct child of div_one & span_two is the direct child of div_two.

Another Example:

<div id='div_one'>
   <ul>
      <li>
         <span id='span_one' />
      </li>
   </ul>
</div>
<div id='div_two'>
   <p>
      <span id='span_two' />
   </p>
</div>

Here, If we use '//div/span' expression then we will not be able to get any result as 'span' is not the direct child of any of the above 'div' nodes.

Single Slash ' / ' Before Double Slash ' // ' In XPath

Single Slash ' / ' must start from root node. So the XPath having Single Slash ' / ' before Double Slash ' // ' will always start with '/html' for HTML documents.

For example:

/html//div

Above XPath is correct but adding '/html' do not provide any significance cause '/html//div' will return the same results as '//div'.

Difference Between Single Slash ' / ' And Double Slash ' // ' In XPath

Difference between Single Slash ' / ' and Double Slash ' // ' in XPath is a very simple yet very important interview question for an automation engineer. In this article, we will learn the difference in a very brief manner so that we can understand the topic clearly.

Single Slash ' / ':

Single Slash ' / ' starts selection from the root node. It is the syntax for '/child::node()' which means select all the nodes that are the child of the matching nodes. It is mainly used to construct Absolute XPath.

For HTML pages, an Absolute XPath is given below:

/html/body/div

Here, 'html' is the root node.

We may create an XPath like below:

/body/div

But the above expression will not be able to find any result as 'body' is not the root node.

Double Slash ' // ':

Double Slash ' // ' starts selection from the document where it finds the matching nodes. It is the syntax for '/descendant-or-self::node()' which means select all the nodes that are descendants of the matching nodes including the matching nodes themselves. It is used to construct Relative XPath.

For HTML pages, a Relative XPath is given below:

//div

Above XPath will find all the 'div' element from the document

Single Slash ' / ' Before Double Slash ' // ':

Single Slash ' / ' must start from root node. So the XPath having Single Slash ' / ' before Double Slash ' // ' will always start with '/html' for HTML documents.

/html//div

Above XPath is correct but adding '/html' do not provide any significance cause '/html//div' will return the same results as '//div'.

Double Slash ' // ' Before Single Slash ' / ':

Double Slash ' // ' only selects all the nodes that are descendants of the matching nodes including the matching nodes themselves. Single Slash ' / ' only selects all the nodes that are the child of the matching nodes.

XPath having Double Slash ' // ' before Single Slash ' / ' is given below:

//div/span

For Example:

<div id='div_one'>
   <span id='span_one' />
   <div id='div_two'>
      <span id='span_two' />
   </div>
</div>

Here, If we use '//div/span' expression then we will get two 'span' nodes.

Why?

• For '//div' we will get two div nodes (div_one & div_two) because Double Slash ' // ' only selects all the nodes that are descendants of the matching nodes including the matching nodes themselves.
• For '/span' we will get two span nodes (span_one & span_two) as span_one is the direct child of div_one & span_two is the direct child of div_two.

Another Example:

<div id='div_one'>
   <ul>
      <li>
         <span id='span_one' />
      </li>
   </ul>
</div>
<div id='div_two'>
   <p>
      <span id='span_two' />
   </p>
</div>

Here, If we use '//div/span' expression then we will not be able to get any result as 'span' is not the direct child of any of the above 'div' nodes.

Double Slash ' // ' After Double Slash ' // ':

Double Slash ' // ' only selects all the nodes that are descendants of the matching nodes including the matching nodes themselves.

XPath having Double Slash ' // ' after Double Slash ' // ' is given below:

//div//span

For Example:

<div id='div_one'>
   <span id='span_one' />
   <div id='div_two'>
      <span id='span_two' />
   </div>
</div>

<div id='div_three'>
   <ul>
      <li>
         <span id='span_three' />
      </li>
   </ul>
</div>
<div id='div_four'>
   <p>
      <span id='span_four' />
   </p>
</div> 

Here, If we use '//div//span' XPath then we will get four 'span' nodes.

Why?

• For '//div' we will get four div node (div_one, div_two, div_three & div_four) because Double Slash ' // ' selects all the nodes that are descendants of the matching nodes including the matching nodes themselves.
• For '//span' we will get four span node (span_one, span_two, span_three & span_four) as span_one, span_two, span_three & span_four are the descendants of each of the div nodes (div_one, div_two, div_three & div_four) which were selected previously (by '//div').

Hopefully, the above explanation helped you to understand the difference between Single Slash ' / ' and Double Slash ' // ' in XPath. Please let me know in the comment section below if you find anything difficult to understand. I'll try my level best to help you.

Using 'text()' Method in 'contains()' Method

Syntax to use text() method in contains() method is given below:

//div[contains(text(), 'text')]

For example:

//a[contains(text(), 'ac')]

Here, //a[contains(text(), 'ac')] searches all the 'a' elements which contains 'ac' as attribute text value.

XPath Using 'or'

'or' expression uses two conditions and one of the two conditions must be true to locate a web element. It will fail to locate an element if both the conditions are false.

Following explanation of  'or' expression will help us to understand this topic briefly.

Two conditions with 'or' expression such as A or B returns the result-set shown below:

A	B	Result
False	False	False
True	False	True
False	True	True
True	True	True

Syntax:

//tag[@attribute='value' or @attribute='value']

Example:

//div[@class='form-group' or @id='user-message']

Let's get a clear view with the below example:

When Condition One and Condition Two both are False then no result is found:

//div[@class = 'spch_' or @id = 'spch_']

When Condition One is True and Condition Two is False then result is found:

//div[@class = 'spchc' or @id = 'spch_']

When Condition One is False and Condition Two is True then result is found:

//div[@class = 'spch_' or @id = 'spchc']

When Condition One and Condition Two both are True then result is found:

//div[@class = 'spchc' or @id = 'spchc']

XPath Using 'and'

'and' expression uses two conditions and both conditions must be true to locate a web element. It will fail to locate an element if any of the conditions is false.

Following explanation of  'and' expression will help us to understand this topic briefly.

Two conditions with 'and' expression such as A and B returns the result-set shown below:

A	B	Result
False	False	False
True	False	False
False	True	False
True	True	True

Syntax:

//tag[@attribute='value' and @attribute='value']

Example:

//div[@class='form-group' and @id='user-message']

Let's get a clear view with the below example:

When Condition One and Condition Two both are False then no result is found:

//div[@class = 'spch_' and @id = 'spch_']

When Condition One is False and Condition Two is True then no result is found:

//div[@class = 'spch_' and @id = 'spchc']

When Condition One is True and Condition Two is False then no result is found:

//div[@class = 'spchc' and @id = 'spch_']

When Condition One and Condition Two both are True then result is found:

//div[@class = 'spchc' and @id = 'spchc']

XPath Using 'starts-with()'

'starts-with()' method is used to identify an element when one is familiar with the attribute value of an element. This method checks the starting text of an attribute. It is very handy to use when the attribute value changes on refresh or any operation on the webpage. We can also use this method to find the element whose attribute value is static.

For example:

Suppose the ID of particular element changes dynamically like:

• Id="message1"
• Id="message2"
• Id="message3"

Here we can see that the initial text is same. In this case, we can use start-with().

Syntax:

//tag[starts-with(@attribute, 'value')]

Example:

//input[starts-with(@id, 'user-message')]

 In the above example, XPath finds those element whose 'ID' starting with 'user-message'.

XPath Using 'contains()'

When an attribute of an element is dynamic then one can use 'contains()' to select the element by using the constant part of the attribute of that web element.

Syntax: 

//tag[contains(@attribute, 'value')]

Example:

XPath = //tag[contains(@name, 'btnClk')]

It searches 'btnClk' for all name attributes in the DOM.

XPath = //tag[contains(text(), 'here')]

It searches the text 'here' in the DOM.

XPath = //tag[contains(@href, 'google.com')]

It searches 'google.com' link in the DOM

Let's get a clear view with the below example:

//span[contains(@class, 'gb_')]

Here, //span[contains(@class, 'gb_')] searches all the 'span' elements which contains 'gb_' as attribute class value.

Another example:

//a[contains(text(), 'ac')]

Here, //a[contains(text(), 'ac')] searches all the 'a' elements which contains 'ac' as attribute text value.

XPath Using 'text()'

'text()' is a method in XPath expression which is used to form a locator based on the text available on a webpage

Syntax:

//tag[text()='exact text']

Example:

//a[text()='About']

Chained XPath

We can create a chain of multiple Relative XPath declarations with ' // ' double slash to find an element location as shown below:

Syntax:

//tag[@attribute='value']//tag[@attribute='value']

Example:

//div[@class='form-group']//input[@id='user-message']

Let's get a clear view with the below example:

//li[@class = 'gb_T']//span[@class = 'gb_Z']

 

Here, //li[@class = 'gb_T']//span[@class = 'gb_Z'] selects all the 'li' elements which contains 'gb_T' as attribute class value and then selects all the 'span' elements which contains 'gb_Z' as attribute class value. //span[@class = 'gb_Z'] selects only those 'span' elements which are the decedent of the 'li' elements selected by //li[@class = 'gb_T'].

Generating XPath With Multiple Attribute

Sometimes it may not be possible to locate an element with a single attribute. In the real world, we have a similar issue. We cannot locate a person just by his/her first name or last name. We have to use a combination of first name and last name to locate a person without making any confusion. A similar technique is used in selenium for locating elements.

Syntax:

//tag[@attribute1='value1'][@attribute2='value2']…[@attributeN='valueN']

Example:

//input[@class='button'][@type='submit'][@value='LOGIN'][@name='Submit']

Let's get a clear view with the below example:

//div[@class = 'ctr-p']

After using the above XPath in 'google.com', we will get two nodes in result.

Now if we want to get a single node than we can simply add another attribute in the above XPath and get the desired result. We will use below XPath:

//div[@class = 'ctr-p'][@id = 'footer']

Here we can see after adding new attribute we are able to select our desired node only. To get the other node we can just simply use:

//div[@class = 'ctr-p'][@id = 'viewport']

Generating XPath With Single Attribute

Single attribute XPath uses one attribute to locate an web element.

Syntax:

//tag[@attribute = 'value']

Example:

//input[@id = 'user-message']

This would select the input element nodes which has 'user-message' as it’s id attribute value.

Let's get a clear view with the below example:

//li[@id = 'ogbkddg:4']

Here, //li[@id = 'ogbkddg:4'] selects all the 'li' node which has 'ogbkddg:4' as it's attribute id.

Basic XPath (Tag, Attribute & Value)

Single Attribute:

Single attribute XPath uses one attribute to locate an web element.

Syntax:

//tag[@attribute = 'value']

Example:

//input[@id = 'user-message']

This would select the input element nodes which has 'user-message' as it’s id attribute value.

Let's get a clear view with the below example:

//li[@id = 'ogbkddg:4']

Here, //li[@id = 'ogbkddg:4'] selects all the 'li' node which has 'ogbkddg:4' as it's attribute id.

Multiple Attribute:

Sometimes it may not be possible to locate an element with a single attribute. In the real world, we have a similar issue. We cannot locate a person just by his/her first name or last name. We have to use a combination of first name and last name to locate a person without making any confusion. A similar technique is used in selenium for locating elements.

Syntax:

//tag[@attribute1='value1'][@attribute2='value2']…[@attributeN='valueN']

Example:

//input[@class='button'][@type='submit'][@value='LOGIN'][@name='Submit']

Let's get a clear view with the below example:

//div[@class = 'ctr-p']

After using the above XPath in 'google.com', we will get two nodes in result.

Now if we want to get a single node than we can simply add another attribute in the above XPath and get the desired result. We will use below XPath:

//div[@class = 'ctr-p'][@id = 'footer']

Here we can see after adding new attribute we are able to select our desired node only. To get the other node we can just simply use:

//div[@class = 'ctr-p'][@id = 'viewport']

Relative XPath

A Relative XPath is the path which starts from the node of our choice and is prefixed with a ' // '. It doesn't need to start from the root node.

For example:

//span[@class = 'Email']

Pros

• It starts from the node of our choice
• It is readable and shorter than Absolute XPath
• It works even after structural change

Cons

• It takes more time to identify element as we specify the partial path
• If there are multiple elements for the same path, it will select the first element that is identified

Let's take a look at a Relative XPath below:

//li[@id = 'ogbkddg:4']

Here, //li[@id = 'ogbkddg:4'] is a Relative XPath and as we can see it did not start from the root node and started from the node of our choice. It is also short and very easy to read. Even if there is any kind of structural change, it will work just fine.

Absolute XPath

The easiest way of finding the XPath is to use the Browser Inspector tool to locate an element and get the XPath of it.

Absolute XPath begins with the root of the HTML pages and is prefixed with a ' / '.

For example:

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

Pros

• It is the easiest way to locate an element.
• It identifies the element very fast

Cons

• It is not readable as it can be very lengthy
• It is very delicate as a minor structural change can make it useless.

Let's discuss the second con of Absolute XPath below:

<html>
   <body>
      <table>
         <tr>
            <th>Column One</th>
            <th>Column Two</th>
         </tr>
      </table>
   </body>
</html>

For the above HTML document if user wants to get the second 'th' then the Absolute XPath will be

/html/body/table/tr/th[2]

Now if we add a new tag between the body and table as below:

<html>
   <body>
      <p>Paragraph One</p>
      <table>
         <tr>
            <th>Column One</th>
            <th>Column Two</th>
         </tr>
      </table>
   </body>
</html>

then the first path will not work as 'p' tag is added in between the body and table. In this case, we have to rewrite the XPath as below:

/html/body/p/table/tr/th[2]

Types of XPath

XPath can be created in two ways:

1. Absolute XPath
2. Relative XPath

Absolute XPath

The easiest way of finding the XPath is to use the Browser Inspector tool to locate an element and get the XPath of it.

Absolute XPath begins with the root of the HTML pages and is prefixed with a ' / '.

For example:

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

Pros

• It is the easiest way to locate an element.
• It identifies the element very fast

Cons

• It is not readable as it can be very lengthy
• It is very delicate as a minor structural change can make it useless.

Let's discuss the second con of Absolute XPath below:

<html>
   <body>
      <table>
         <tr>
            <th>Column One</th>
            <th>Column Two</th>
         </tr>
      </table>
   </body>
</html>

For the above HTML document if user wants to get the second 'th' then the Absolute XPath will be

/html/body/table/tr/th[2]

Now if we add a new tag between the body and table as below:

<html>
   <body>
      <p>Paragraph One</p>
      <table>
         <tr>
            <th>Column One</th>
            <th>Column Two</th>
         </tr>
      </table>
   </body>
</html>

then the first path will not work as 'p' tag is added in between the body and table. In this case, we have to rewrite the XPath as below:

/html/body/p/table/tr/th[2]

Relative XPath

A Relative XPath is the path which starts from the node of our choice and is prefixed with a ' // '. It doesn't need to start from the root node.

For example:

//span[@class = 'Email']

Pros

• It starts from the node of our choice
• It is readable and shorter than Absolute XPath
• It works even after structural change

Cons

• It takes more time to identify element as we specify the partial path
• If there are multiple elements for the same path, it will select the first element that is identified

Let's take a look at a Relative XPath below:

//li[@id = 'ogbkddg:4']

Here, //li[@id = 'ogbkddg:4'] is a Relative XPath and as we can see it did not start from the root node and started from the node of our choice. It is also short and very easy to read. Even if there is any kind of structural change, it will work just fine.

What is XPath?

XPath is defined as XML path. As XPath is a query language which is based on the tree representation of the XML document, it provides the ability to navigate around the XML tree and locate individual elements, attributes or any other node of the XML document. XML and HTML are like siblings. They have a very similar structure and as a result XPath can be used to query HTML document too.

Syntax for XPath:

The syntax for XPath is very simple and easy to understand. Standard syntax for constructing XPath is given below:

XPath = //tag[@attribute = 'value']

// : used to select the desired node.

tag : tag of that particular node.

@ : used to select attribute.

attribute : name of the attribute.

value : value of the attribute

For example:

//li[@id = 'ogbkddg:4']

Here,

• //li selects all 'li' node
• @id = 'ogbkddg:4' selects the attribute which has 'ogbkddg:4' as attribute id value.

So, //li[@id = 'ogbkddg:4'] selects all the 'li' node which has 'ogbkddg:4' as attribute id value. In our case, we have only one matching node for the query.