- Blog On Chropath…!!!!!!!
Chropath is a development tool which gives unique Xpath & CSS value.It is developed by Sanjay Kumar, Product Evangelist at AutonomIQ. Really, a very big thanks to him for such a wonderful tool which is a TIME SAVER & also LIFE SAVER for an Automation Tester.
It also helps to edit, inspect & generate Xpath & CSS selectors on any webpage & saves manual effort in automation script writing. Chropath is the highest rated (4.6+) Xpath tool. Chropath is used by almost all the developers & Automation testers globally.
I am writing this blog by keeping in my mind that somewhere it helps one of the QA in writing Automation scripts with less time and less effort. Also I thank once again Sanjay Kumar for this wonderful.
Features of ChroPath
- ChroPath opens as a sidebar tab in the dev tools panel.
- It can be used to get the absolute Xpath and CSS selector of the element or selected node.
- It generates unique relative Xpath and CSS selector for the elements selected.
- It can be used to verify Xpath/CSS selectors and allows you to view the matching node(s) in their sequential occurrence. All matching elements in the web page gets highlighted with a dashed blue outline and if you mouse hover on any of the listed matching node in the ChroPath tab, the corresponding element outline changes from blue to orange indicating that is the element for selected node.
- If the matching element is not in the visible area of web page, it will automatically scroll to the area on mouse hovering over the matching node.
- While verifying Xpath, if you enter the Xpath expression pattern incorrectly or incompletely it gets highlighted in red.
- In the latest version chropath 6.0, it even stores the steps of testing (unit testing) by developer and it helps for noting down.
- It also allows us to copy xpath by copy icon and paste it anywhere we want.
How to use ChroPath:
- Right-click on the web page, and then click Inspect.
2. In the right side of Elements tab, click on ChroPath tab which will be the last tab.
3. To generate selectors, inspect element or click on any DOM node, it will generate the unique relative Xpath and all possible Selectors with their occurrences. Scroll in ChroPath panel to see all generated Selectors.
4. To evaluate Xpath/CSS, type the Xpath/CSS query and press enter key.
As you enter, it will query in DOM for the relevant element/node. You can view the total number of the matching node(s) and nodes value as per their sequential occurrence. A green colour outline appears around to highlight the first matching elements and rest in blue colour in the web page.
5. If you mouse hover on any matching node in the ChroPath tab, green/blue dashed outline will convert into dotted orange red to highlight the corresponding element in the webpage.
6. If the found element is not in visible area on webpage then mouse hover on found node in ChroPath panel will scroll that element in the visible area with dotted orange red outline.
7. If found element is not highlighted but visible then on mouse hover on matching node on ChroPath tab it will highlight element with dotted orange red outline.
8. Copy the locators just by clicking on copy icon.
9. Click on edit icon if want to edit any locator.
What is Chropath suggested Xpath ?
Chropath suggested Xpath is the Xpath for the 1st matching node of your selector. It helps a lot when we have multiple scenarios. It helps us to write robust unique & best relative Xpath. One can save a lot of time & learn how to write robust unique relative Xpath with less time and effort.
Purposefully, I am especially mentioning Iframe feature because Chropath helped me a lot in generating Xpath for my Iframe application.
Iframe feature (Supports only those Iframe which has the same src):
If inspected element is inside Iframe,
1. Chropath will show “inside iframe” text in selector box.
2. It will highlight the inspected element in orange dotted outline.
3. Chropath will generate xpath for the iframe inside which the inspected element exist along with xpath for inspected element.
4. If you want to verify your selector inside iframe then 1st inspect any element inside that iframe so that it get the DOM of iframe and then verify the selector.
5. Again if you want to verify any selector for a element which is outside iframe then first inspect any element which is outside iframe so that it get the top DOM and then verify the selector.
How to generate Automation code:
1. Click on the set driver command icon (+ icon, just below selector box) in ChroPath tab.
2. Now when you will generate selectors, it will generate selectors with pre-command like driver.findElement(By.xpath(‘xpathValue’)) appended in selectors.
3. You can also change these command. Like FindByXpath(‘xpathValue’). Just have the keyword ‘xpathValue’ in your command where you want to replace the selector value.
4. Now just by clicking on copy icon you got full automation step.
5. It will add the pre-command only when this is active, if you don’t want to add pre-command click on the plus icon again.
How to generate XPaths for multiple elements in few seconds:
1. Click on the record button (circular icon) in ChroPath tab.
2. Now just inspect all the elements one by one or click on DOM node for which you want to generate the XPaths.
3. It will generate xpath along with label name.
4. You can copy, edit, delete any of the row in table.
5. Label and xpath fields are editable, so you can directly edit them there itself.
6. Click to Copy All icon given in header to copy all xpaths value.
7. You can also export all the generated xpaths, just by clicking Export icon given in the table header in ChroPath tab.
8. At any point of time if you want to stop recording and go back to default view, just click on record button again. This will not delete your recorded selectors but if you will close the dev tool then you will loose them.
9. Click on Delete All icon to clear all the rows.
10. You can also stop recording at any time just by clicking on ON/OFF button.
11. Every time when you will open dev tool and then ChroPath, it will be fresh window.
How to generate multiple automation script steps in few seconds:
1. Before or after generating the multiple XPaths, in recorder mode just click on the set driver command icon (+ icon, just below selector box) in CP tab.
2. You can update the command which you use in your framework on XPath and press enter. Here just keep the keyword “xpath Value” in where you type xpath in your command.
3. If XPaths have been already generated then Chropath will append the command on all of them.
4. Also you can inspect more elements one by one or click on DOM node for which you want to generate the command.
5. It will generate commands along with label name.
6. Rest you have all the features like CopyAll, DeleteAll and export all the commands in xls.
7. Just single click, you can get commands for all the required elements and paste in your framework.
8. For page object model, it’s really time saver.
Thanks for reading my Blog.I hope you liked my blog on Chropath, if you really like please pass on to your contacts so that they can get help from Chropath. In case of any doubts in using Chropath ,you can contact Sanjay Kumar, he is very cool and very responsive to clear our doubts.