HomeSelenium

Selenium Locators – Relative XPath Expression – Part 3

Selenium Locators – Relative XPath Expression – Part 3

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

In continuation of the previous articles i.e. Relative XPath Expression – Part 1 and Relative XPath Expression – Part 2, I am going to explain the next step of Relative XPath Expressions (i.e. Part 3) practically in this article.

Let’s get started.

Selenium Locators – Relative XPath Expression – Part 3

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:

Relative XPath - More complex application

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

Relative XPath - ChroPath

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

4) Let’s locate all the images (i.e. img tags) in the HTML page using the relative XPath Expression.

Note: <img> tag in HTML is generalled used to represent image UI elements on the web pages.

Let’s find out the same by typing //img into the ChroPath and press ‘Enter’ key as shown below:

Observe that around 53 elements got located on the Web Page using the single //img Relative XPath Expression as shown below:

Relative XPath - img tag locator

5) Out of all the Images, let’s locate the below-shown image:

Relative XPath - locate this image

6) Right click on the above image and select ‘Inspect’ option as shown below:

Relative XPath - Inspect Image

7) Observe that the below HTML code got highlighted on inspect the above image:

Relative XPath - img HTML highlighted

8) By looking at the above-highlighted HTML code, we can create a Relative XPath Expression to locate the inspected image.

Above highlighted HTML code has height attribute with value 200px.

Let’s create a Relative XPath Expression using height attribute and value as – //img[@height=’200px’]

Using the above Relative XPath Expression, we can locate the desired image on the web page as shown below:

Relative XPath - One image located

9) There are some cases where the application changes dynamically and multiple Relative XPath Expressions are required to locate the UI element.

For example, at one point of time Relative XPath Expression One will work and at the other point of time, another Relative XPath Expression will work. In such cases, we can use the pipe | operator with these two Relative XPath Expressions as shown below:

Relative XPath Expression One | Relative XPath Expression Two

As one of the above two expressions will work at any point of time, the Pipe operation provided will work as an or operator.

As I don’t have a similar situation to use the above pipe operator in Relative XPath Expressions, I will practically demonstrate it by locating the two UI elements at a time. Follow the below steps to understand.

Let’s locate the below-shown dropdown field using its class attribute and value as shown below:

Right click on the dropdown field and select ‘Inspect’ option as shown below:

Relative XPath - Dropdown inspect

In the displayed HTML code of inspected dropdown field, observe that there is a class attribute with value ‘combobox’ as shown below:

Relative XPath - dropdown html

By looking at the above HTML code, we can create the Relative XPath Expression as – //select[@class=’combobox’]

Let’s Execute this Relative XPath Expression in ChroPath and observe that it is locating the dropdown field on the UI as shown below:

Relative XPath - dropdown located

Now let’s locate the another UI element, say hyperlink (shown below) using its value attribute as shown below:

Right click on the hyperlink and select ‘Inspect’ option as shown below:

Relative XPath - hyperlink inspect

In the displayed HTML code of inspected hyperlink, observe that there is a value attribute with value ‘link2’ as shown below:

Relative XPath - hyperlink html

By looking at the above HTML code, we can create the Relative XPath Expression as – //a[@value=’link2′]

Let’s Execute this Relative XPath Expression in ChroPath and observe that it is locating the hyperlink on the UI as shown below:

Relative XPath - hyperlink located

As we are able to locate the dropdown field and hyperlink individually so far, let’s locate them together by using the pipe operator | in Relative XPath Expression as shown below:

//select[@class=’combobox’] | //a[@value=’link2′]

Let’s execute the above Relative XPath Expression and observe that it is locating the two UI elements at the same time as shown below:

Relative XPath - Pipe Operator demonstration

10) Now let’s use the next operator i.e. or operator in Relative XPath Expressions, by following the below steps:

While pipe | operator is used with two Relative XPath Expressions, or operator needs to be used inside Single Relative XPath Expression.

As explained in the above step 9, pipe operator | can be used with multiple Relative XPath Expressions, we can also use for locating the below two hyperlinks:

First hyperlink using its id attribute value as shown below:

Right-click and Inspect the first hyperlink to the get the below-highlighted HTML code:

Relative XPath - first hyperlink inspect

Relative XPath Expression for locating the first hyperlink using the id attribute value in the above screenshot will be //a[@id=’link1′]

Second hyperlink using its value attribute value as shown below:

Right-click and Inspect the second hyperlink to the get the below-highlighted HTML code:

Relative XPath - second hyperlink inspect

Relative XPath Expression for locating the second hyperlink using the value attribute value in the above screenshot will be //a[@value=’link2′]

Finally, we can use the pipe operator | with the above two Relative XPath Expressions to locate both hyperlinks as shown below:

//a[@id=’link1′] | //a[@value=’link2′]

Relative XPath - Hyperlinks Pipe

As both the tags of Relative XPath Expressions are same i.e. a tags as shown below:

//a[@id=’link1′] | //a[@value=’link2′]

Hence, we can also use or operator instead of pipe operator | by optimizing the above Relative XPath Expression as shown below:

//a[@id=’link1′ or @value=’link2′]

In the above Relative XPath Expression, we have used or operator instead of pipe operator | as both the tags in the Relative XPath Expressions are the same. The optimized Relative XPath Expression will still locate two hyperlinks as shown below:

Relative XPath - Optimized OR operator

Here ends the third 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 🙂

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 *