HomeSelenium

Selenium Locators – Installing and using devtools-highlighter add-on

Selenium Locators – Installing and using devtools-highlighter add-on

<<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 devtools-highlighter add-on for validating the CSS Selectors.

Note: devtools-highlighter add-on is only available in Firefox browser and can only be used to validate the CSS Selectors.

In this article, I am going to practically demonstrate installing and using devtools-highlighter add-on for validating the CSS Selectors in Firefox browser.

Let’s get started.

Selenium Locators – Installing and using devtools-highlighter add-on

Follow the below steps for installing and using devtools-highlighter:

1) Open Firefox browser, google search for ‘devtools-highlighter’ and click on the below link which is displayed in the search results:

devtools-highlighter - search

2) In the displayed Firefox Add-on’s page of ‘devtools-highlighter’, click on ‘Add to Firefox’ button as shown below:

devtools-highlighter - firefox addons

3) In the displayed dialog asking for permissions, click on the ‘Add’ button as shown below:

devtools-highlighter - add

4) Dialog confirming that the ‘devtools-highlighter’ add-on is successfully added will be displayed and click on the ‘OK’ button as shown below:

devtools-highlighter - confirmation

5) Navigate to any application URL say http://omayo.blogspot.com/ in the Firefox browser and press ‘F12’ key on the keyboard to view the Firefox developer options as shown below:

devtools-highlighter - dev options

6) Click on the ‘Highlighter’ option from Firefox Developer options, select ‘CSS Selector’ option from the dropdown and select ‘Unlimited results’ checkbox option as shown below:

devtools-highlighter - highlighter

7)  Now, let’s validate a CSS Selector say input[name=’q’] by entering it into the ‘Search Query’ text field in the ‘Highlighter’ and press ‘Enter’ key on your keyboard as shown below:

Note: If you are new to CSS Selectors, you can start learning them from the first post – What is a CSS Selector?

devtools-highlighter - validated

Here concludes this article.

In the next article, I will explain a different alternative for 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 *