<<Previous Post << Complete Tutorial>> Next Post>>
In the previous article, I have practically demonstrated Relative XPath Expressions on a simple Web page.
In this article, I am going to practically demonstrate Relative XPath Expression on a more complex Web Page.
Let’s get started.
Selenium Locators – Relative XPath Expression – Part 2
Follow the below steps to practice Relative XPath Expressions on a complex Web Page:
1) Open http://omayo.blogspot.com/ in Chrome Browser, where ChroPath is already installed (Refer ChroPath installation in Chrome Browser here and its usage in Chrome Browser here ) as shown below:
I have taken the below Web Application for the demonstration which is more complex than the Web Application I have used in the previous article (i.e. Relative XPath Expressions – Part 1) for demonstration.
2) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:
3) Select ‘Rel XPath’ option from the ‘Selectors’ dropdown as shown below:
4) Let’s locate all the input tags in the HTML page using the relative XPath Expression.
Note: <input> tag in HTML is generalled used to represent many UI elements, like Text Box fields, Buttons, radio options, checkbox options and so on.
Let’s find out the same by typing //input into the ChroPath and press ‘Enter’ key as shown below:
Observe that around 33 elements got located on the Web Page using the single //input XPath Expression as shown below:
5) The following are the different UI elements that got located using the above Relative XPath Expression:
As it is difficult to capture all the located UI elements in a single screenshot, I have attached 3 screenshots to cover all the located UI elements using the above Relative XPath Expression:
6) Let’s locate the first input tag out of all the above 33 located input tags.
As //input will locate all the input tags on the web page, let’s modify it as shown below:
(//input)[1] – will locate the first UI element
(//input)[2] – will locate the second UI element having input tag
(//input)[8] – will locate the eight UI element having input tag
Let me demonstrate all the above Relative XPath Expressions in the below steps:
7) Execute (//input)[1] Relative XPath Expression in ChroPath and observe that it is locating the first UI element having input tag as shown below:
8) Execute (//input)[2] Relative XPath Expression in ChroPath and observe that it is locating the second UI element having input tag as shown below:
9) Execute (//input)[8] Relative XPath Expression in ChroPath and observe that it is locating the eight UI element having input tag as shown below:
10) Out of all the input tags available on the web page, let’s locate only the input tags having the name attribute by executing the Relative XPath Expression – //input[@name]
11) Out of all the input tags available, let’s locate the input tag having attribute name ‘value’ and its value as ‘orange’ by executing the Relative XPath Expression – //input[@value=’orage’]
12) Out of all the input tags available, let’s locate the input tag having two attribute names and values.
The first attribute name is ‘name’ and its value is ‘color’
The second attribute name is ‘value’ and its value is ‘blue’
By Executing the Relative XPath Expression – //input[@name=’color’][@value=’blue’]
13) We can also use the and operator in the above Relative XPath Expression by using //input[@name=’color’ and @value=’blue’]
This Relative XPath Expression will work the same as the Relative XPath Expression in Step 12.
By executing the Relative XPath Expression //input[@name=’color’ and @value=’blue’], we will get the same outcome of what we got in step 12.
14) Locate the Radio and Checkbox options that are in the selected mode.
All the checkbox or radio option that are in selected mode on UI will have the checked attribute name in their HTML code.
Hence we will be using the Relative XPath Expression – //input[@checked] to locate them.
Here ends the second part of Relative XPath Expressions.
In the next article, I will demonstrate the next set of Relative XPath Expressions in a practical way.
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>>