HomeSelenium

Selenium Locators – Validate XPath Expressions and CSS Selectors in Chrome Console

Selenium Locators – Validate XPath Expressions and CSS Selectors in Chrome Console

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

As explained in one of the previous posts, Firebug and Firepath add-ons for locating and validating the UI elements on the page got deprecated and discontinued and we have to use alternative add-ons in place of Firebug and Firepath.

Though ChroPath is the best alternative of Firebug & Firepath in locating the UI elements and validating the XPath Expressions & CSS Selectors, we can also use the default Chrome Browser Console to validate the XPath Expressions and CSS Selectors.

In this article, I am going to practically demonstrate validating XPath Expressions and CSS Selectors using the default Chrome Browser Console.

Let’s get started.

Selenium Locators – Validate XPath Expressions and CSS Selectors in Chrome Console

Follow the below steps for validating XPath Expressions and CSS Selectors using the default Chrome Browser Console.

1) Open any application URL say http://omayo.blogspot.com/ in Chrome browser, press ‘F12’ keyboard key and observe that the ‘Elements’ tab be displayed in the default Chrome Dev Tools options by default as shown below:

Chrome Console - F12

 

2) Now, select the ‘Console’ tab beside the ‘Elements’ tab as shown below:

Chrome Console - Console

3) Let’s validate the XPath Expression say //button[@id=’but2′]

First, enter $x(“”) into the Console tab as shown below:

Chrome Console - Dollar X

Now, enter the XPath Expression to be validated in between the double quotes of the above-entered text as shown below and press ‘Enter’ keyboard key:

Chrome Console - Execute XPath

Expand the result and hover your mouse on the below line and observe that the executed XPath Expression is locating the ‘Button2’ button on the page as shown below:

Chrome Console - Located using XPath

4) Similarly, let’s validate the CSS Selector say #but2

First, enter $$(“”) into the Console tab as shown below:

Chrome Console - Dollar Dollar

Now, enter the CSS Selector to be validated in between the double quotes of the above-entered text as shown below and press ‘Enter’ keyboard key:

Chrome Console - Execute CSS Selector

Expand the result and hover your mouse on the below line and observe that the executed CSS Selector is locating the ‘Button2’ button on the page as shown below:

Chrome Console - Located using CSS Selector

Here concludes this article.

In the next article, I will explain ‘Why ChroPath is the best of all the other alternatives of Firebug and Firepath?’

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 *