HomeSelenium

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

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

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

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

You can not only auto-generate the XPath Expressions and CSS Selectors using ChroPath in Firefox browser 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 Firefox Browser.

Let’s get started.

Selenium Locators – Validating XPath Expressions and CSS Selectors using ChroPath Add-on in Firefox 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 Firefox browser and validating. Follow the below steps to verify the same:

1) Open http://omayo.blogspot.com/ in Firefox Browser, where ChroPath is already installed (Refer ChroPath installation in Firefox Browser here and its usage in Chrome Browser here ) as shown below:

ChroPath Firefox Validation - Open Omayo

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

ChroPath Firefox Validation - Select

3) 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?

ChroPath Firefox Validation - XPath

4) 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?

ChroPath Firefox Validation - CSS

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 *