Smart automation locator generator
[SelectorsHub, LetXpath, Ruto, ChroPath, TruePath & TestProject]
In this article, let's check the Smart element locator generators that provide unique, relative & absolute Xpath and CSS in seconds for use of automation.
When it comes to automation, finding elements from the DOM (Document Object Model) and creating dynamic locators is a tedious and time-consuming task for automation beginners and sometimes for experienced testers as well (no exception for even advanced users) 😀. Page elements play a key role in test automation and the core of the automation execution engine. In the event that components are dynamic on-page and keep changes each day, it’s smarter to create a relative XPath or CSS for it.
To generate smart locators with a single click there are multiple extensions available in the market. A few of them, proven solutions are given below.
During the COVID-19 period, new XPath and CSS selector plugins emerged into the testing industry known as SelectorsHub & LetXPath.
1. SelectorsHub:
SelectorsHub assists with composing and confirm the XPath and CSS selector. SelectorsHub is the finished better approach to compose and confirm the XPath and CSS selectors.
SelectorsHub will auto recommend all attributes, text and everything alongside their events to finish Selectors rapidly. Presently you need not to reorder quality qualities from DOM any longer to assemble XPath and cssSelector.
Features:
- It likewise supports shadowDOM, iframe, frame, and SVG components.
- It gives the correct error message such as what’s wrong in your XPath and CSS selector. It also gives the index-based xpath in auto-suggest.
- Cross-browser support.
- SelectorsHub is the only tool that made it possible to write its own selectors in less than 5sec with its auto-suggest feature without compromising learning skills.
- It helps you to improve your XPath and CSS selectors writing skills.
And most importantly, it’s from ChroPath developer Sanjay Kumar | Creator of SelectorsHub & ChroPath
https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh?hl=en
2. LetXPath:
LetXPath is an open-source project, it is used to find the XPath & CSS in a single click with code snippets based on the element type.
Features 💭
1. Get the best XPath in a single click
2. Most XPath are build based on the direct element or based on the parent to the child element
3. LetXPath supports dynamic XPath like, from parent to child element relationship
eg., following, following-sibling, preceding, preceding-sibling and others
4. XPath based on the Axes
5. Enhanced Axes XPath by user selctions
Snippets 🎓
1. XPath with driver code snippets
2. LetXPath supports as of now Selenium - Java, Selenium - Python, Selenium - C# and Protractor JS
3. Custome framework is in the development stage
And it’s from Ruto developer @koushik chatterjee
https://chrome.google.com/webstore/detail/letxpath/bekehlnepmijedippfibbmbglglbmlgk
3. Firebug:
In the olden days, Firebug is the handy locator generator tool that comes with the Firefox browser as a add-on. But, firebug is no more in existence, it was deprecated in March 2017. See details about it here.
4. ChroPath:
AutonomIQ offers a developers platform ChroPath to generate and validate unique selectors like relative XPath with iframe support.
ChroPath generates all possible selectors 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 Studio helps to record all manual steps along with automation steps. With smart maintenance features, all xpaths can be verified from the script. ChroPath also supports iframe, multi selectors generation, dynamic attributes, generate relative XPath with custom attribute, automation script steps generation.
Install:
1. Go to the chrome web store and install ChroPath extension
2. Open dev tools/F12 on your website
3. Inspect any element
4. Dev tools — right corner next to Accessibility can find ChroPath (see picture below).
Pros:
1. Generates relative Xpath and CSS
2. ChroPath will give selectively only matching node in its tab which makes your job easy.
3. Supports chrome & firefox & other browsers.
4. ChroPath will automatically scroll the window to the matching node.
Cons:
Like all other tools or extensions, ChroPath has few downsides as well.
- ChroPath generates lengthy relative paths where it should be short in form.
- It doesn’t generate the following/proceeding chaining element locators.
Ex: In the below example identifying an email input field, where ChroPath generates multiple locator options but lengthy relative XPaths.
with id & class
without id & class
iFrame Example:
Even though, in the DOM ```type=”email”``` attribute available somehow ChroPath couldn’t identify it. But, ChroPath Studio comes with other features such as recorder option, manual test case generator,etc., good to give it a try.
5. Ruto:
Ruto brings the best XPath to you and striving hard to improve better performance and more new features.
Ruto - A product of Testleaf!Rūto assist to identify the selector from HTML DOM like id, name, XPath, especially XPath in 20+ different patterns as of today. That makes your test automation life lot more easier.Restart your browser after installing Ruto.
Install:
1. Go to the chrome web store and install Ruto extension
2. Inspect any element by right click
3. select Ruto — XPath finder >> Add to Ruto
4. On top — chrome extension bar can find Ruto (see pictures below).
Pros:
1. Build selector including 20+ XPath patterns.
2. Dynamic XPath based on Parent-child Axes
3. Allow you to copy the XPath of your choice to IDE
4. Provides driver commands and POM (Page Object Model snippets based on your inputs)
5. Recorder: to generate page objects or page factory element code-snippets.
Ex: @FindBy(how = How.XPATH, using="(//button[@class='ReflowTopMenuItem'])[1]")
private WebElement home;@FindBy(how = How.XPATH, using="(//button[@class='ReflowTopMenuItem'])[2]")
private WebElement theater;
Cons:
1. Only generates XPath, the latest version generates CSS path but an absolute one.
2. Sometimes generates un-related element locators
Ex: Above an example of identifying an email input field and generate options,
iFrame Example:
6. TruePath:
TruePath generates the relative XPath on click.
It then further group the XPath based on:
***********************************************
1. Id, href & src
2. Class, name, title etc.
3. Index
TruePath now provides DevTool supports. With DevTool supports, users can easily customize the generated XPath.
Disclaimer:
This extension uses Google Analytics to collect extension usage statistics to help improve the user experience. It neither sell nor share any data to anyone for any use. For more details please visit the privacy policy https://qaworld.ga/privacyInstall:
1. Go to the chrome web store and install Truepath extension
2. Inspect any element by right click
3. select Relative XPath >> Xpath with options
4. Click any option ex: Xpath with id, index (see picture below).
Pros: In case, the target element is from iFrame, then it will show you the iFrame URL.
TruePath works seamlessly for the following browsers:
- XPath in legacy Firefox versions,
- XPath in Firefox latest version,
- XPath in Firefox Quantum,
- XPath in Chrome
TruePath Supports
- Page Object XPath,
- Normal XPath format,
- XPath in iFrame,
- XPath in Frame,
- Indexed XPath,
- multiple options for the XPath
Cons:
1. Only generates XPath, no CSS support
2. No recorder option
Ex: Above example of identifying an email input field and generate options,
iFrame Example:
7. TestProject:
TestProject’s in-browser smart recorder provides a powerful set of built-in capabilities.
Element Inspector
Inspect and evaluate any element in your app. Choose from various built-in or suggested actions, set validations, view locator strategies, and save elements.
Element Explorer:
Easily view and analyze the structure of your mobile application screens. Inspect element hierarchy, choose from various locator strategies, and view all available properties of UI components.
In the below picture, the recorder generates xpath resource-id class and other attributes.
Conclusion:
Despite the language stage that Selenium, Cypress, or other tools being utilized, XPath & CSS is mostly utilized to find the web components in the DOM. Xpaths & CSS are a lot of supportive to find the web components when there are no other attributes that are accessible in the HTML labels.
As per the above features and analysis, Ruto and Truepath are good enough and easy to generate smart XPaths with a single click & iFrame support. On the other side, if your framework is developed with only the CSS selectors support then Chropath & Ruto is the available option. But there is a catch, these extensions generate absolute `CSS selector`. Hope the future versions will generate relative paths.
Other than the above extensions, TestProject’s in-built recorder provides smart attributes to ease the automation process (see picture above).
References:
