HomeSelenium

Selenium Locators – Validating XPath Expressions and CSS Selectors using ChroPath Add-on in Chrome Browser

Selenium Locators – Validating XPath Expressions and CSS Selectors using ChroPath Add-on in Chrome Browser

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

In the previous articles, I have explained Installing ChroPath Add-on on the Chrome Browser and Using ChroPath Add-on in Chrome Browser.

You can not only auto-generate the XPath Expressions and CSS Selectors using ChroPath as explained in the previous articles, but also validate whether the given XPath Expressions and CSS Selectors are able to locate the required UI elements on the pages.

In this article, I am going to practically demonstrate Validating XPath Expressions and CSS Selectors using ChroPath Add-on in Chrome Browser.

Let’s get started.

Selenium Locators – Validating XPath Expressions and CSS Selectors using ChroPath Add-on in Chrome Browser

Let say we have the below XPath Expression and CSS Selector:

  1. XPath Expression – //input[@name=’q’]
  2. CSS Selector – input[name=’q’]

We need to now find out whether the above XPath Expression and CSS Selector are able to locate the ‘Search’ text box field by entering them into the ChroPath of Chrome browser and validating. Follow the below steps to verify the same:

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 validate the above-mentioned XPath Expression – //input[@name=’q’] by entering into the ChroPath and pressing ‘Enter’ key and observe that the given XPath Expression is locating the ‘Search’ box field on the page as shown below:

Note: If you are not familiar with the XPath Expressions, go through the previous articles in this tutorial which start with What is an XPath?

Selenium Locators - Validating XPath Expressions

5) Similarly, let’s validate the above-mentioned CSS Selector – input[name=’q’] by entering into the ChroPath and pressing ‘Enter’ key and observe that the given CSS Selector is locating the ‘Search’ box field on the page as shown below:

Note: If you are not familiar with the CSS Selectors, go through the previous articles in this tutorial which start with What is a CSS Selector?

Selenium Locators - Validating CSS Selectors

Here concludes this article.

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 *