<<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.
Pre-requisites: Go through all the previous articles under the ‘Firebug and Firepath alternatives’ section of this tutorial.
In this article, I will recommend the best alternative for Firebug and Firepath.
Let’s get started.
Selenium Locators – ChroPath in Chrome Browser is the best alternative for Firebug and Firepath
As there are many alternatives for the deprecated and discontinued Firebug and Firepath add-ons, I will recommend using ChroPath add-on in Chrome browser as the best alternative.
Sanjay Kumar is the creator of this ChroPath add-on. Click here to reach him on his linkedin profile if anything needed.
The following are the different reasons why ChroPath add-on in Chrome browser is the best alternative for Firebug and Firepath:
- ChroPath can auto-generate the Absolute XPath, Relative XPath, and Relative CSS Selectors
- ChroPath not just auto-generates, but auto-generated very optimized, unique and strong XPath Expressions and CSS Selectors.
- ChroPath can also validate the existing XPath Expressions and CSS Selectors
- ChroPath has other advanced features which it popular, best and easy to use among the other available alternatives for Firebug and Firepath. I will demonstrate all the other advanced features of ChroPath in the below section.
Advanced features of ChroPath
The following are the different advanced features of ChroPath:
ChroPath displays the HTML code of the executed XPath Expression or CSS Selector
1) Open any application URL say http://compendiumdev.co.uk/selenium/basic_web_page.html in the Chrome Browser, press ‘F12’ key on your keyboard and expand all the HTML tags displayed in the Elements tab as shown below:
2) Select ‘Elements’ tab, select ‘ChroPath’ sub-tab, enter an XPath Expression say //p[@id=’para1′] into the ChroPath, press ‘Enter’ keyboard key and observe that the p tag in the HTML got filtered and located as shown below:
Hence ChroPath filters and displays the HTML code of the executed XPath Expression or CSS Selector
ChroPath adds ‘xpath=1’ or ‘css=1’ to the HTML line of code of the Executed XPath Expression or CSS Selector
3) Observe that xpath=1 attribute value got added to the located HTML line of code by the ChroPath using the executed XPath Expression as shown below:
In case of executing CSS Selector in the ChroPath, css=1 will be added to the HTML line of code instead of xpath=1 by ChroPath.
Auto-generates XPath Expressions or CSS Selectors, on clicking the HTML lines of code under the ‘Elements’ tag
4) Click on any line under the HTML code of Elements tab and observe that the related XPath Expression and CSS Selector got auto-generated by the ChroPath as shown below:
While the XPath Expression and CSS Selectors are auto-generated and displayed in the ChroPath as shown above, click on the ‘pencil’ icon beside the auto-generated stuff to get it added to the text box field as shown below:
When multiple elements are matching, ChroPath will display the multiple HTML lines of code and on hovering them will highlight the UI elements on the web page.
5) Execute a CSS Selector say p in the ChroPath, observe that multiple UI elements are matching and hence multiple HTML lines of code got filtered and displayed as shown below:
And on hovering on any one of the displayed multiple lines of HTML code, observe that the element matching the hovered HTML line of code will get highlighted as shown below:
And from the above screen, when multiple elements are located it will add css=1, css=2,.. to state (css=1 locates the first element, css=2 locates the second element …)
Auto-generates the XPath Expression or CSS Selectors using the Inspect option of the Google Chrome Browser.
6) Right-click on any UI element on the web page (say the first paragraph), click on ‘Inspect’ option and observe that the XPath Expressions and CSS Selectors will be auto-generated as shown below:
Error messages will be displayed by the ChroPath for the HTML elements for which XPath Expressions or CSS Selectors cannot be generated.
7) Click on the <script> tag in the HTML DOM on the left side while the ChroPath is on and observe that an error message stating that ‘Invalid Pattern’ and other messages got displayed as shown below:
Not only auto-generates the XPath Expressions and CSS Selectors, but on inspecting the links having unique link text, will auto-generate link text and partial link text locators too.
8) Right-click on any hyperlink on the http://omayo.blogspot.com/ application, inspect it and observe that LinkText and PLinkText locators are getting auto-generated as shown below:
If the id attribute value in the auto-generated XPath Expression is not static, then you can deselect the checkbox option to change the auto-generated XPath Expression to the dynamic type.
9) Deselect the below Checkbox option to make the XPath Expression dynamic:
10) Apart from the above-advanced features, ChroPath has the below 3 advanced features for (Explained in the below youtube video):
- Modifying the Attributes in the auto-generated XPath Expressions and CSS Selectors
- Creating Selenium Code statements by providing the Selenium Statements structure in advanced
- Recording multiple locators at a go for future use
Understand all these three features from the below video:
Hence ChroPath is the best alternative for Firebug and Firepath.
Here concludes this article.
In the next article, I will explain ‘Why we have to write our own XPath Expressions and CSS Selectors?
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 ?
On a mission to contribute to the Software Testing Community in all possible ways.
<<Previous Post << Complete Tutorial>> Next Post>>