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:
2) In the displayed Firefox Add-on’s page of ‘devtools-highlighter’, click on ‘Add to Firefox’ button as shown below:
3) In the displayed dialog asking for permissions, click on the ‘Add’ button as shown below:
4) Dialog confirming that the ‘devtools-highlighter’ add-on is successfully added will be displayed and click on the ‘OK’ button as shown below:
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:
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:
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?
Here concludes this article.
In the next article, I will explain a different alternative for Firebug and Firepath.
- > 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 🙂
On a mission to contribute to the Software Testing Community in all possible ways.