Find Xpath using Chropath Extension

Why we need to find XPath?

Find XPath using chropath extension! For each Automation Engineer, finding XPath is one of the monotonous and boring tasks perhaps no one wants to kill their time on this and for new automation engineers, it’s the toughest task in beginning. Traditionally, we used DevTools and console for XPath finding and validation, these XPath are usually absolute and useless. To solve this problem one automation engineer developed wonderful utility which saves so much time. That tool is ChroPath. Here is the way to how to use Chropath.

What is ChroPath & How it makes finding XPath easy? – Gind XPath using Chropath extension

ChroPath generates unique relative XPath, absolute XPath, CSS selectors, link text and partial link text 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 a custom attribute, automation script steps generation and many more.

How to install ChroPath?

• Search “ChroPath Chrome extension in Chome” and click on Browser

Or click to URL : https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlkcjo?hl=en

• Click on “Add TO CHROME”

• Once the extension is added, you get the ChroPath icon in the Chrome menu as shown below.

How to use ChroPath?

• Right-click on the web page, and then click Inspect.
• On the right side of the Elements tab, click on the ChroPath tab.
• To generate selectors, inspect element or click on any DOM node, it will generate the unique relative XPath/absolute XPath/CSS selector/linkText/partialLinkText.
• 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 matching node(s) and nodes value as per their sequential occurrence. A green color outline appears around to highlight the first matching elements and rest in blue color on the web page.

• 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 on the webpage.
• If the found element is not in a visible area on a webpage then mouse hover on found node in ChroPath panel will scroll that element in the visible area with a dotted orange-red outline.
• If the found element is not highlighted but visible then on mouse hover on the matching node on ChroPath tab it will highlight element with a dotted orange-red outline.
• copy the locators just by clicking on the copy icon.
• click on edit icon if you want to edit any locator.

ChroPath features:

Generate Relative XPath with attribute

1. Click on the setting button which is available in the ChroPath tab.
2. In the 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 attributes and text or parent.
4. If the 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) sort cuts have been provided. If you don’t want to generate XPath with any of these attributes, just uncheck them.

Generate Automation code

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

Generate selectors in bulk along with label name

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 a selector along with the label name.
4. You can copy, edit, delete any of the rows 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 the Export icon given in the table header in the ChroPath tab.
7. At any point in time if you want to stop recording and go back to the default view, just click on the record button again. This will not remove your recorded selectors but if you will close the dev tool then you will lose them.
8. Also, you can stop recording at any time just by clicking on ON/OFF button.
9. Every time when you will open the dev tool and then ChroPath, it will be a fresh window.

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 in the same time.

UI features-

1. Now ChroPath gives the colored relative xpath.
2. Delete option in place of delete one by one.

Iframe feature

Note: *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 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.

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.
   On/Off button-
3. If you don’t want to generate selectors, turn off the button available in ChroPath tab.
4. Turn on the button to enable ChroPath again.

Dark Theme-

1. To use dark theme, go to devtools settings.
2. Change the Theme from Light to Dark.

Note:

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.

Hope above tutorial help you in adding “ChroPath” on browser and use it during Automation. ThoughtCoders highly recommend this tool for Automation engineer as it boost efficiency of Automation Engineer.
For more information, please contact us or drop us a mail at query@thoughtcoders.com or visit our website www.thoughtcoders.com. We are also available on Facebook, Twitter, LinkedIn and Instagram!

[mailpoet_form id=”2″]