HomeSelenium

Selenium Locators – Relative XPath Expressions – Part 1

Selenium Locators – Relative XPath Expressions – Part 1

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

In the previous article, I have explained the Two types of XPath Expressions and Relative XPath Expression is one type.

In this article, I am going to give a good number of examples to practice Relative XPath Expression in detail from scratch.

Pre-requisites: HTML Basics explained in the previous articles are required for understanding this article. HTLM Basics – click here to start learning.

Also, go through the below five links before going through this article:

  1. Hierarchy of HTML Source Code
  2. Installing ChroPath Add-on in Chrome Browser
  3. Using ChroPath Add-on in Chrome Browser
  4. Practice Absolute XPath Expressions in detail here
  5. Advantages and Disadvantages of Absolute XPath Expressions

Let’s get started.

Selenium Locators – Practice Relative XPath Expressions in detail here

Follow the below steps to practice Relative XPath Expressions in detail from scratch:

1) As we already know Relative XPath Expressions means Direct/Shortcut XPath Expressions which directly locate the UI elements using their tags in the Web Pages.

2) All Relative XPath Expressions start with a double slash i.e. //

3) In order to understand the Relative XPath Expressions better, we need to first learn Absolute XPath Expressions (Refer Practice Absolute XPath Expressions in detail here)

4) Absolute XPath Expressions are for making your learning of XPath Expressions easier, while Relative XPath Expressions are really used in real time projects. We should not be using the Absolute XPath Expressions in real time projects, instead, we will be using Relative XPath Expressions in Real time Projects. Refer to the Advantages and Disadvantages of Absolute XPath Expressions

5) Let’s get started. Practice along with me by following the below step.

6) Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Chrome Browser, where ChroPath is already installed (Refer ChroPath installation in Chrome Browser here and usage in Chrome Browser here ) as shown below:

I have taken a very basic Web Application for demonstration as shown in the below screenshot to make your learning easy:

Absolute XPath - Opening Basic Application

7) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:

Absolute XPath - Open ChroPath

8) Select ‘Rel XPath’ option from the ‘Selectors’ dropdown as shown below:

Relative XPath Expressions - Rel XPath

 

9) Expand all the tags on the left side (i.e. <head> and <body> tags) as shown below:

Relative XPath Expressions - Expand Head Body

10) Lets first locate the entire web page i.e. html tag using the Relative XPath Expression.

All Relative XPath Expressions starts with //.

And in order to locate the entire web page, we need to locate the html tag.

Hence we need to create a Relative XPath Expression ‘//html‘ to locate the html tag directly.

Now type ‘//html‘ and press ‘Enter’ key as shown below.

Observe that on pressing the ‘Enter’ keyboard key, the //html RelativeXPath Expression will be locating the entire HTML page. (i.e. xpath=1 attribute will be added in the html tag by ChroPath to state the same.)

Relative XPath Expressions - Total Web Page

11) The next challenge is to locate the head section of the web page i.e. head tag.

Hence we need to create a Relative XPath Expression ‘//head‘ to locate the head tag directly.

Now type ‘//head‘ and press ‘Enter’ key as shown below.

Observe that we don’t have to give the complete path in case of Relative XPath Expressions.

We are just giving the // followed by the tag name to be located i.e. head

Observe that on pressing the ‘Enter’ keyboard key, the //head RelativeXPath Expression will be locating the head section of the web page. (i.e. xpath=1 attribute will be added in the head tag by ChroPath to state the same.)

Relative XPath Expressions - head tag located

 

12) The next challenge is to locate the title of the web page i.e. title tag.

Hence we need to create a Relative XPath Expression ‘//title‘ to locate the title tag directly.

Now type ‘//title‘ and press ‘Enter’ key as shown below.

Observe that we don’t have to give the complete path in case of Relative XPath Expressions.

We are just giving the // followed by the tag name to be located i.e. title

Observe that on pressing the ‘Enter’ keyboard key, the //title RelativeXPath Expression will be locating the title of the web page. (i.e. xpath=1 attribute will be added in the title tag by ChroPath to state the same.)

Relative XPath Expressions - title tag located

13) The next challenge is to locate the body section of the web page i.e. body tag.

Hence we need to create a Relative XPath Expression ‘//body‘ to locate the body tag directly.

Now type ‘//body‘ and press ‘Enter’ key as shown below.

Observe that we don’t have to give the complete path in case of Relative XPath Expressions.

We are just giving the // followed by the tag name to be located i.e. body

Observe that on pressing the ‘Enter’ keyboard key, the //body RelativeXPath Expression will be locating the body section of the web page. (i.e. xpath=1 attribute will be added in the body tag by ChroPath to state the same.)

Relative XPath Expressions - body tag located

 

 

14) The next challenge is to locate all the Paragraphs on the web page i.e. p tags.

Hence we need to create a Relative XPath Expression ‘//p‘ to locate all the p tags directly.

Now type ‘//p‘ and press ‘Enter’ key as shown below.

Observe that we don’t have to give the complete path in case of Relative XPath Expressions.

We are just giving the // followed by the tag names to be located i.e. p

Observe that on pressing the ‘Enter’ keyboard key, the //p RelativeXPath Expression will be locating all the Paragraphs on the web page. (i.e. xpath=1, xpath=2 attributes will be added in the p tags by ChroPath to state the same.)

Relative XPath Expressions - p tags located

 

 

15) Let’s locate the first paragraph only by adding the index value [1] to the above Relative XPath Expression to from the Relative XPath Expression: //p[1]

Relative XPath Expressions - first p tag

 

 

16)  Let’s locate the second paragraph only by adding the index value [2] to the above Relative XPath Expression to from the Relative XPath Expression: //p[2]

Relative XPath Expressions - second p tag

 

 

17) Let’s locate the paragraph having the id attribute value as ‘para1′ by adding the  [@id=’para1’] to the Relative XPath Expression to from: //p[@id=’para1′]

Relative XPath Expressions - p with para1

 

 

18) Let’s locate the paragraph having the id attribute value as ‘para2′ by adding the  [@id=’para2’] to the Relative XPath Expression to from: //p[@id=’para2′]

Relative XPath Expressions - p with para2

 

 

19) Let’s locate the paragraph having the class attribute value as ‘main’ by adding the  [@class=’main’] to the Relative XPath Expression to from: //p[@class=’main’]

Relative XPath Expressions - p tag main

20) Let’s locate the paragraph having the class attribute value as ‘sub’ by adding the  [@class=’sub’] to the Relative XPath Expression to from: //p[@class=’sub’]

Relative XPath Expressions - p sub

 

 

21) Now let’s take two different attribute names and values to locate the p tags in the above web page.

Let’s locate all the paragraphs having the id attribute value as ‘para1’ and also class attribute value as ‘main’.

Now, to find the paragraphs having the id attribute as ‘para1’ and at the same time class attribute value as ‘main’, we need to append [@id=’para1′] [@class=’main’] to the above Relative XPath Expression to form ‘//p[@id=’para1′][@class=’main’]

Relative XPath Expressions - p main and sub

 

 

22) Similarly, let’s locate the p tags having both id attribute value as ‘para2’ and class attribute value as ‘sub’ in the above web page.

Let’s locate all the paragraphs having the id attribute value as ‘para2’ and also class attribute value as ‘sub’.

In order to locate all the paragraphs in the above page, we have used the Absolute XPath as ‘/html/body/p

Now, to find the paragraphs having the id attribute as ‘para2’ and at the same time class attribute value as ‘sub’, we need to append [@id=’para2′] [@class=’sub’] to the above Absolute XPath Expression to form ‘/html/body/p[@id=’para2′][@class=’sub’]

Type the ‘/html/body/p[@id=’para2′][@class=’sub’]‘ in the ChroPath and press Enter to find whether it is locating the Paragraphs having the id attribute value as ‘para2’ and also the class attribute value mentioned as ‘sub’ as shown below:

Relative XPath Expressions - p para2 and sub

 

 

23) Let’s try to locate all the p tags having id attribute value as ‘para1’ and also class attribute value as ‘sub’ using the Relative XPath Expression: //p[@id=’para1′][@class=’sub’]

As there are no p tags in the above web page having both id attribute value as ‘para1’ and class attribute value as ‘sub’, the ChroPath won’t be able to locate any p tag as shown in the below screenshot:

Relative XPath Expressions - No Elements Located

 

 

24) Now let’s locate all the p tags in the above web page having any of the id values as ‘para1’ or ‘para2’.

Now, to find the paragraphs having the id attribute as ‘para1’ or ‘para2’ , we need to append [@id=’para1′ or @id=’para2′] to the above Absolute XPath Expression to form //p[@id=’para1′ or @id=’para2′]

Type the //p[@id=’para1′ or @id=’para2′] in the ChroPath and press Enter to find whether it is locating the Paragraphs having the id attribute value as ‘para1’ or ‘para2’ as shown below:

Relative XPath Expressions - para1 or para2

 

 

Here concludes the first part of Relative XPath Expressions.

In the next article, more complex application to practically demonstrate the other set of Relative XPath Expressions examples in detail.

Next Steps:

  • > To learn more about Selenium, continue to the next post (Click on Next Post link below)
  • > Check complete Selenium Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning 🙂

About Me > Arun Motoori

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

If you like this article, share it on LinkedIn using the below button:

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *