How To Find Chropath In Chrome
<<Previous Post << Complete Tutorial>> Next Mail>>
As explained in ane of the previous posts, Firebug and Firepath add-ons for locating and validating the UI elements on the page got deprecated and discontinued and nosotros 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 volition recommend the best alternative for Firebug and Firepath.
Let's go started.
Selenium Locators – ChroPath in Chrome Browser is the best alternative for Firebug and Firepath
Equally 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 culling.
Sanjay Kumar is the creator of this ChroPath addition. Click here to achieve him on his linkedin contour if annihilation needed.
The post-obit are the dissimilar reasons why ChroPath add-on in Chrome browser is the best alternative for Firebug and Firepath:
- ChroPath can machine-generate the Absolute XPath, Relative XPath, and Relative CSS Selectors
- ChroPath non 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, all-time 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 department.
Advanced features of ChroPath
The post-obit are the different advanced features of ChroPath:
ChroPath displays the HTML lawmaking of the executed XPath Expression or CSS Selector
ane) Open any application URL say http://compendiumdev.co.uk/selenium/basic_web_page.html in the Chrome Browser, printing 'F12' key on your keyboard and expand all the HTML tags displayed in the Elements tab equally shown below:
2) Select 'Elements' tab, select 'ChroPath' sub-tab, enter an XPath Expression say //p[@id='para1′] into the ChroPath, press 'Enter' keyboard primal and observe that the p tag in the HTML got filtered and located equally shown below:
Hence ChroPath filters and displays the HTML code of the executed XPath Expression or CSS Selector
ChroPath adds 'xpath=1' or 'css=ane' 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 lawmaking by the ChroPath using the executed XPath Expression as shown beneath:
In example of executing CSS Selector in the ChroPath, css=1 will exist added to the HTML line of code instead of xpath=ane by ChroPath.
Automobile-generates XPath Expressions or CSS Selectors, on clicking the HTML lines of code under the 'Elements' tag
4) Click on whatever 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 automobile-generated and displayed in the ChroPath as shown above, click on the 'pencil' icon beside the automobile-generated stuff to get information technology added to the text box field equally shown beneath:
When multiple elements are matching, ChroPath will display the multiple HTML lines of lawmaking and on hovering them will highlight the UI elements on the web page.
five) Execute a CSS Selector say p in the ChroPath, detect that multiple UI elements are matching and hence multiple HTML lines of code got filtered and displayed as shown beneath:
And on hovering on any one of the displayed multiple lines of HTML code, detect that the element matching the hovered HTML line of code volition become highlighted as shown beneath:
And from the above screen, when multiple elements are located it will add css=1, css=2,.. to land (css=one locates the first element, css=2 locates the 2d element …)
Motorcar-generates the XPath Expression or CSS Selectors using the Audit option of the Google Chrome Browser.
half-dozen) Right-click on any UI element on the web folio (say the first paragraph), click on 'Audit' option and observe that the XPath Expressions and CSS Selectors volition exist motorcar-generated as shown below:
Error messages will be displayed past the ChroPath for the HTML elements for which XPath Expressions or CSS Selectors cannot be generated.
vii) Click on the <script> tag in the HTML DOM on the left side while the ChroPath is on and notice that an mistake message stating that 'Invalid Pattern' and other messages got displayed as shown below:
Non 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 beneath:
If the id attribute value in the machine-generated XPath Expression is non static, then you tin can deselect the checkbox choice to modify the auto-generated XPath Expression to the dynamic type.
nine) Deselect the below Checkbox choice to make the XPath Expression dynamic:
10) Apart from the above-avant-garde features, ChroPath has the below 3 advanced features for (Explained in the below youtube video):
- Modifying the Attributes in the motorcar-generated XPath Expressions and CSS Selectors
- Creating Selenium Code statements past providing the Selenium Statements structure in avant-garde
- Recording multiple locators at a go for future employ
Empathise all these three features from the below video:
Hence ChroPath is the best alternative for Firebug and Firepath.
Here concludes this article.
In the side by side article, I will explain 'Why we have to write our ain XPath Expressions and CSS Selectors?
Next Steps:
- > To larn more than about Selenium, proceed to the next post (Click on Side by side Mail service link beneath)
- > Check complete Selenium Tutorial Contents hither (Click here)
Please leave your questions/comments/feedback beneath.
Happy Learning ?
About Me > Arun Motoori
On a mission to contribute to the Software Testing Community in all possible ways.
<<Previous Post << Consummate Tutorial>> Next Post>>
Source: https://www.qafox.com/selenium-locators-chropath-in-chrome-browser-is-the-best-alternative-for-firebug-and-firepath/
0 Response to "How To Find Chropath In Chrome"
Post a Comment