Selenium Locators – Using ChroPath Add-on in Chrome Browser

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

In the previous article, I have explained ‘Installation of ChroPath Add-on on Chrome Browser‘.

As FireBug & FirePath Add-ons in Firefox Browser got deprecated/discontinued, ChroPath Add-on in Chrome browser is the best alternative out of all the other alternative options available.

In this article, I am going to explain the steps for using ChroPath in Chrome Browser. 

Let’s get started.

Selenium Locators – Using ChroPath Add-on in Chrome Browser

Follow the below steps for using the ChroPath in Chrome Browser:

1) Open Chrome Browser, press ‘F12’ key on your keyboard and you will see the default Google Chrome developer options as shown below:

2) While the ‘Elements’ tab is selected, click on the >> option as shown below to find the ‘ChroPath’ option and click on ‘ChroPath’ option:

3) On clicking the above ‘ChroPath’ option, ‘ChroPath’ functionality will be displayed as shown below:

4) Open any website say http://omayo.blogspot.com/. While the above ChroPath functionality is open, click on the ‘Inspect’ option of the default Chrome Developer option and select ‘Button2’ button UI element on the web page and observe that the  XPath Expression and CSS Selectors for the ‘Button2’ button got auto-generated in the ChroPath as shown below:

5) Now copy the XPath Expression by using the ‘Copy’ option in the ChroPath Functionality and paste it in the Selenium IDE by appending with ‘xpath=’ text as shown below:

6) Now type any command say ‘click’ in the Command field and click on the ‘Search’ icon and observe that the ‘Button2’ button is getting located using the Pasted XPath Expression in the Selenium IDE as shown below:

7) Now copy the auto-generated CSS Selector by using the ‘Copy’ option in the ChroPath Functionality and paste it in the Selenium IDE by appending with ‘css=’ text as shown below:

8) Now click on the ‘Search’ icon and observe that the ‘Button2’ button is getting located using the Pasted CSS Selector in the Selenium IDE as shown below:

Apart from the auto-generation of XPath Expressions and CSS Selectors using ChroPath, we can also use ChroPath to validate the manually created XPath Expressions and CSS Selectors. I will explain the validation of manually created XPath Expressions and CSS Selectors using ChroPath in the next 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>>