ChroPath: How an XPath DevTool is revolutionizing UI Automation and Web Development

By Sanjay Kumar, SDET, UI Team

InMobi’s engineering principles center around driving innovation for automating and simplifying mundane work. But to uncomplicate engineering routines, one needs to address the unanticipated challenges that arise during the process. As a first of many to come, with this article we deep dive into one such experience.

“Can you help me with directions to get to 221B Baker Street?”

“Sure, make the first right after you walk 300m on this lane, and to your left will be your destination.”

Before the age of Google Maps, that’s how the world located any address. And if someone were to miss a lane or make a wrong turn, they’d very well have to begin all over again. What Google Maps did, was to find the best relative path to every address. You miss a lane or make a wrong turn, no problem, you reroute and continue. A comparable scenario is when web developers need to find the address of various elements or nodes on any web page.

Automation Testing: How do we eliminate the behind-the-scenes ‘manuality’?

On the one hand, automation engineers are constantly inventing ways to automate the process of testing various elements on a webpage. Funnily enough, generating the XPath (address of any element in the UI) or CSS Selector of a required element is still being done manually. A lot of our engineers’ valuable time is being spent on manually finding the address of elements on a webpage and writing robust locators. We are now one step closer to answering the bigger question, for engineers worldwide.

What if the most time consuming and tedious aspect of web development and testing, could be reduced to a single-click operation?

Enter ChroPath — a developer tool that I created which makes it easy to write, edit, extract and evaluate XPath and CSS queries on any webpage. It saves at least 40–50% manual effort in automation script writing.

ChroPath is available as a free extension, that can drastically simplify the manual steps in UI automation engineering.

Installing ChroPath

The ChroPath extension is available for Chrome and Firefox. Follow our simple installation guide here.

Once installed, the extension opens as a sidebar tab in the DevTools panel where you can access the DOM. The extension is an add-on to the existing DevTools panel, with ‘Inspect Element’ displayed on the left-hand side and XPath/CSS on the right-hand side, enabling you to evaluate both on the same tab, as shown below.

How is ChroPath useful (Use cases)?

Relative XPath

On an average, obtaining the relative XPath of a single node takes close to 50 seconds using the default DevTools from the element source. With multiple locators in play for every test case, saving time on generating the correct relative XPath can significantly ease UI automation testing, and ChroPath is doing just that. With ChroPath, you can retrieve the relative XPath of any node by just clicking on it.

Debugging

Another equally significant use of ChroPath is in Test Case Debugging. In UI automated testing, some common occurrences such as time-out exceptions or results such as ‘element not found’ require the tester to find the locations of the said element before attempting to rectify the errors. ChroPath vastly simplifies this process. By just searching for the said element in the ChroPath tab, all the matching nodes are easily located in the extracted format.

For more use cases, click here.

ChroPath’s Popularity

Today, ChroPath is the highest rated relative and absolute XPath extension available on Chrome and Firefox, with a user rating of 4.6. With new updates rolling in, more than 50,000 developers from over 160 countries are currently using the tool.

Why did ChroPath take off when there are so many other similar tools?

DevTools built to help with XPath and CSS selectors are not an entirely unexplored concept. However, the differentiating factor with ChroPath is its ease of use and adaptability.

A must-have tool for Selenium users, UI automation testers and engineers, and web developers, ChroPath wins in comparison to other similar extensions available such as FirePath, XPath Helper, XPath Finder and many more.

It’s minimal scroll nature, ability to provide relative and absolute XPath and CSS Selectors on the same tab, and unique compatibility has led to ChroPath attracting a large number of users, almost twice as more over similar tools.

A comparison between FirePath, ChroPath and Default DevTools

Other Features that made Chropath tick

• Upon inspecting an element, all three main types of selectors — Relative XPath, Absolute XPath, and CSS Selectors are displayed on one tab, without having to use the drop-down menu repeatedly.
• With features such as edit and copy, you can modify the XPath as needed.
• Complete error messages with reasoning if appropriate selectors are not generated.
• Abundant optimization in finding the Relative XPath as shown below.

• While locating nodes, on searching, ChroPath scrolls the window for the first matching node, while simultaneously displaying all matching nodes and node values as per their sequential occurrence.
• A dashed blue outline appears around the matching node(s) to highlight all the matching elements on the web page.
• If you were to enter an incorrect XPath, the input box is highlighted in red.

The development of ChroPath is a direct result of the pursuit of innovation at InMobi. We’re striving to achieve the highest quality of automation in testing and web development, and we find it is imperative to automate methodical tasks such as XPath handling. We encourage and recommend engineers around the world to make the most of this free extension, and anticipate your feedback, ideas for collaboration and suggestions.

Disclaimer: This document is intended for the internal use and information purposes only and may not be distributed externally or reproduced for external distribution in any form. Any views or opinions presented are solely those of the author and do not necessarily represent those of InMobi Group. InMobi, makes no representation or warranty, express or implied, as to the fairness, accuracy, completeness or correctness of the content of the document and InMobi does not accept any responsibility or liability whatsoever for any loss or damage however arising from any use of this document or its contents or arising in connection with it.