<<Previous Post << Complete Tutorial>> Next Post>>
In the previous article, I have explained the Two types of XPath Expressions and Absolute XPath Expression is one type.
In this article, I am going to give a good number of examples to practice Absolute 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 three links before going through this article:
- Hierarchy of HTML Source Code
- Installing ChroPath Add-on in Chrome Browser
- Using ChroPath Add-on in Chrome Browser
Let’s get started.
Selenium Locators – Practice Absolute XPath Expressions in detail here
Follow the below steps to practice Absolute XPath Expressions in detail from scratch:
1) As we already know Absolute XPath Expressions means Complete/Full XPath Expressions which start from the root element i.e. /html in the Web Pages.
2) All Absolute XPath Expressions start with a single slash i.e. /
3) In order to understand the XPath Expression, we need to get started by learning Absolute XPath Expressions from scratch.
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 Projects. (I will explain more on this in detail in the upcoming articles)
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:
7) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:
8) Select ‘Abs XPath’ option from the ‘Selectors’ dropdown as shown below:
9) Expand all the tags on the left side (i.e. <head> and <body> tags) as shown below:
10) As every Absolute XPath expression starts with a single slash i.e. ‘/’, let’s enter the single slash as shown below into the text field and press ‘Enter’ key on your keyboard.
Observe that on pressing ‘Enter’ key, ‘Its default DOM’ message will be displayed as shown below to state that ‘/’ single lash is locating the entire web page (i.e. locating the entire DOM – Document Object Model of the Web Page).
Note: DOM will be explained in detail in the upcoming articles.
11) Now type the root node in HTML i.e. html after the single slash and press ‘Enter’ key as shown below.
Observe that on pressing the ‘Enter’ keyboard key, the /html XPath 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.)
12) Now append one of the child tags of html tag i.e. ‘/head’ to the above XPath to form ‘/html/head‘ and press ‘Enter’ key as shown below:
Observe that the given Absolute XPath Expression is locating the head tag in the HTML. (i.e. xpath=1 attribute will be added in the head tag by ChroPath to state the same.)
13) Now append the child tag of head tag i.e. title tag to the above Absolute XPath Expression to form ‘\html\head\title‘ and press ‘Enter’ key as shown below:
Observe that the given Absolute XPath Expression is locating the title tag in the HTML. (i.e. xpath=1 attribute will be added in the title tag by ChroPath to state the same.)
14) Now append the child tag of html tag i.e. body tag to the ‘/html’ Absolute XPath Expression to form ‘\html\body‘ and press ‘Enter’ key as shown below:
Observe that the given Absolute XPath Expression is locating the body tag in the HTML. (i.e. xpath=1 attribute will be added in the body tag by ChroPath to state the same.). Also, observe that the body section of the Web Page is highlighted on the UI too as shown below:
15) Now append the child tag of body tag i.e. body tag to the ‘/p’ Absolute XPath Expression to form ‘\html\body\p‘ and press ‘Enter’ key as shown below:
Observe that the given Absolute XPath Expression is locating the p tags in the HTML. (i.e. xpath=1 and xpath=2 attributes will be added in the two p tags by ChroPath to state the same.). Also, observe that all the paragraphs on the Web Page are highlighted on the UI too as shown below:
16) Now let’s locate the first p tag by adding a filtered index [1] to the above Absolute XPression to form ‘\html\body\p[1]‘ and press ‘Enter’ key as shown below:
Observe that the given Absolute XPath Expression is locating the first p tag in the HTML. (i.e. xpath=1 attribute will be added in the first p tag by ChroPath to state the same.). Also, observe that all the first paragraph on the Web Page is highlighted on the UI too as shown below:
17) Similarly, let’s locate the second p tag by adding a filtered index [2] to the above Absolute XPression to form ‘\html\body\p[2]‘ and press ‘Enter’ key as shown below:
Observe that the given Absolute XPath Expression is locating the second p tag in the HTML. (i.e. xpath=1 attribute will be added in the second p tag by ChroPath to state the same.). Also, observe that all the second paragraph on the Web Page is highlighted on the UI too as shown below:
18) Let’s locate the p tags having the id attribute value as ‘para1’ in the above sample Web Page.
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 value as ‘para1’, we need to append [@id=’para1′] to the above Absolute XPath Expression to form ‘/html/body/p[@id=’para1′]‘
Type the ‘/html/body/p[@id=’para1′]‘ in the ChroPath and press Enter to find whether it is locating the Paragraphs having the id attribute value mentioned as ‘para1’ as shown below:
19) Similarly, we can locate the Paragraph tags having the id attribute value as ‘para2’ in the above web page.
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 value as ‘para2’, we need to append [@id=’para2′] to the above Absolute XPath Expression to form ‘/html/body/p[@id=’para2′]‘
Type the ‘/html/body/p[@id=’para2′]‘ in the ChroPath and press Enter to find whether it is locating the Paragraphs having the id attribute value mentioned as ‘para2’ as shown below:
20) Now let’s take a different attribute name and value to locate the p tags in the above web page.
Let’s locate all the paragraphs having the class attribute value as ‘main’.
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 class attribute value as ‘main’, we need to append [@class=’main’] to the above Absolute XPath Expression to form ‘/html/body/p[@class=’main’]‘
Type the ‘/html/body/p[@class=’main’]‘ in the ChroPath and press Enter to find whether it is locating the Paragraphs having the class attribute value mentioned as ‘main’ as shown below:
21) Similarly, we can locate the Paragraph tags having the class attribute value as ‘sub’ in the above web page.
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 class attribute value as ‘sub’, we need to append [@class=’sub’] to the above Absolute XPath Expression to form ‘/html/body/p[@class=’sub’]‘
Type the ‘/html/body/p[@class=’sub’]‘ in the ChroPath and press Enter to find whether it is locating the Paragraphs having the class attribute value mentioned as ‘sub’ as shown below:
22) 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’.
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 ‘para1’ and at the same time class attribute value as ‘main’, we need to append [@id=’para1′] [@class=’main’] to the above Absolute XPath Expression to form ‘/html/body/p[@id=’para1′][@class=’main’]‘
Type the ‘/html/body/p[@id=’para1′][@class=’main’]‘ in the ChroPath and press Enter to find whether it is locating the Paragraphs having the id attribute value as ‘para1’ and also the class attribute value mentioned as ‘main’ as shown below:
23) 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:
24) Let’s try to locate all the p tags having id attribute value as ‘para1’ and also class attribute value as ‘sub’ using the Absolute XPath Expression: ‘/html/body/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:
25) 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 ‘/html/body/p[@id=’para1′ or @id=’para2′]‘
Type the ‘/html/body/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:
26) In more complex applications or real time applications, the Absolute XPath Expressions won’t be so small as I expaliend in this article.
Let me give an example for an Absolute XPath Expression in complex applications like http://omayo.blogspot.com/ for a Button say ‘Button2’.
Absolute XPath Expression for the above button ‘Button2’ will be long as shown below:
/html[1]/body[1]/div[4]/div[2]/div[2]/div[2]/div[2]/div[2]/div[2]/div[1]/div[4]/div[2]/div[1]/aside[1]/div[1]/div[9]/div[1]/button[1]
Don’t worry, as you don’t have to create such kind of Absolute XPath Expressions manually.
In the next article, I will explain the disadvantage of using Absolute XPath Expressions.
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 ?
On a mission to contribute to the Software Testing Community in all possible ways.
<<Previous Post << Complete Tutorial>> Next Post>>