AutonomIQ ChroPath Tool Review - A Boon for Web Automation Engineers

When you are doing Web Application Automation, one of the most crucial and time consuming part is finding unique and robust element locators for all the elements.

Initially, one had to create locator by himself by inspecting the element and the DOM.

Then firebug came into the picture and made this task easier but since 2017 it is no longer available.

Nowadays, devtools of browsers have become more feature rich and helpful to locate the web page elements(especially Chrome devtools), which has been a great help for users.

But even while using devtools for locating elements from browsers having the most feature rich devtools, many challenges are faced and below are some of them:

1. Time Consuming as you have to manually click and find for each elements.

2. It does not support providing locator values.

3. If it supports providing locator values then it still does not support relative XPaths.

4. Even if it supports relative xpaths then it won’t work properly for elements with dynamic IDs.

Now all the above challenges are solved by AutonomIQ ChroPath tool, with many thanks to the creator of this tool Sanjay Kumar.

Will go into the details of how these challenges are solved later, will first give brief details about this tool.

ChroPath generates unique relative xpath, absolute xpath, cssSelectors, linkText and partialLinkText just by one click. ChroPath can also be used as Editor for selectors. It makes easy to write, edit, extract, and evaluate XPath queries on any webpage. ChroPath also supports iframe, multi selectors generation, generate relative xpath with custom attribute, automation script steps generation and many more. ChroPath Tool is available for widely used browsers like Google Chrome, Mozilla Firefox, Opera and Microsoft Edge(Chromium).

Below are the step-by-step instructions for using ChroPath in your browser:

1. Right-click on the web page, and then click Inspect.

2. In the right side of Elements tab, click on ChroPath tab.

3. To generate selectors, inspect element or click on any DOM node, it will generate the unique relative XPath/absolute XPath/CSS selector/linkText/partialLinkText. 

4. To evaluate XPath/CSS, type the XPath/CSS query and press the enter key.

As you enter, it will query in DOM for the relevant element/node. You can view 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 the copy icon.

9. click on the edit icon if want to edit any locator.

Now let’s say you have a use case when you want to use the relative xpath by only using name attribute, then you can do it for any specific attribute as well as mentioned under:

1. Click on setting button which is available in ChroPath tab.

2. In attribute name box, type your attribute value and hit enter. 

3. It will generate the relative xpath with the given attribute if that will be unique else it will try with other attribute and text or parent.

4. If given attribute is not there in the node then it will generate the unique relative xpath with some other attribute.

5. Also for few attributes (id, class, name and placeholder) short cuts have been provided. If you don't want to generate xpath with any of these attributes, just uncheck them.

Seems good so far right, but you will still have to write the syntax in your code e.g. driver.findElementByXPath(‘Xpath Locator’) right? Well that thing is also handled with Chropath because you can generate the automation code like the mentioned command along with your locator by below steps:

1. Click on the set driver command icon (+ icon, beside setting icon) 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 the 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.

Below are some other excellent features of ChroPath tool:

(I) Get selectors and editor both the options in single selector view:

1. If you want to work with any particular selector like Rel XPath only, then change the selectors drop down value to Rel XPath.

2. Here you will get Rel XPath as in separate row like default view and editor box empty to use ChroPath as editor at the same time.

(II) UI features:

1. Now ChroPath gives the colored relative xpath.

2. Delete option in place of delete one by one.

(III) iframe feature (Supports only those iframe which has the same src.):

1. If element inside iframe, then it will highlight first matching element in orange dotted outline.

2. It will also add one 'if..' icon in input box of ChroPath tab to make it clear that element is inside iframe.

3. 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.

4. Again if you want to verify any selector for an element which is outside iframe then first inspect any element which is outside iframe so that it gets the top DOM and then verify the selector.

(IV) Dynamic ID support:

1. To generate relative xpath without id, uncheck the checkbox there in relative xpath row.

2. To generate relative xpath with id, select the checkbox.

(V) On/Off button:

1. If you don't want to generate selectors, turn off the button available in ChroPath tab.

2. Turn on the button to enable ChroPath again.

(VI) Dark Theme:

1. To use dark theme, go to devtools settings.

2. Change the Theme from Light to Dark.

Below are some points which needs to be kept in mind while using ChroPath: 

1. For one selector only, change the dropdown value from selectors to rel XPath/abs Xpath/CSS sel in header.

2. Tool will add xpath/css attribute to all the matching node(s) as per their sequential occurrence. For example, a matching node appearing second in the list will have xpath=2. And if verifying CSS then it will add css=2.

3. Supports only those iframe which has the same src.

Now let me talk about the feature which I like the most and which I believe is very useful, bulk-generation of locators. ChroPath can automatically generate the locators with label names of all the elements you have clicked during a bulk-generation session, isn’t that awesome!!!

Below are the details about the bulk-locator-generation feature:

1. Click on the record button in ChroPath tab.

2. Now here just inspect all the elements or click on DOM node for which you want to generate the selectors.

3. It will generate selector along with label name.

4. You can copy, edit, delete any of the row in the table.

5. Label and selectors fields are editable, so you can directly edit them there itself.

6. You can also export all the generated selectors, just by clicking Export icon given in the table header in ChroPath tab.

7. At any point of time if you want to stop recording and go back to default view, just click on the record button again. This will not remove your recorded selectors but if you close the devtool then you will lose them.

8. Also you can stop recording at anytime just by clicking on ON/OFF button.

9. Every time when you will open devtool and then ChroPath, it will be fresh window.

So AutonomIQ ChroPath is a tool which can help you in generating unique and robust web locators in a very short time(maybe a few minutes), which will take a lot of time(maybe an hour or a few hours in some cases) and efforts if tried to do the same tasks in a traditional manner.

One thing I forgot to mention, this boon for web automation engineers is absolutely free!!!

Here are some details about how it is being used in major IT companies including tech giants worldwide, feedback of some users and how it is different and better than other similar tools.

Lastly, feel free to share this article with your friends/colleagues so that their lives can become easier and also feel free to give your feedback for this article in the comments section.