AutonomIQ offers a developers platform ChroPath to generate and validate unique selectors like relative xpath with iframe support
ChroPath 5.0 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. Please contact Sanjay Kumar, ChroPath Product Evangelist at [email protected] for support. Change log 5.1.0- 1) Added footer link for "ChroPath for Edge". 2) Added video tutorial link for code generation and multiple xpath generation. 3) Placeholder with instruction in multi selector mode. How to use ChroPath- 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 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 copy icon. 9. click on edit icon if want to edit any locator. Generate Relative xpath with your attribute- 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) sort cuts have been provided. If you don't want to generate xpath with any of these attribute, just uncheck them. Generate Automation code- 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 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 selector along with label name. 4. You can copy, edit, delete any of the row in 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 record button again. This will not remove your recorded selectors but if you will close the devtool then you will loose 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. 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- *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- 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. 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.
- (2020-01-18) zebra DEU: A magnificent tool, I wait patiently for the new version :)
- (2020-01-17) Joshua: 试试
- (2020-01-15) Murphy Chu: 受益良多，謝謝
- (2020-01-13) lka lala: 小白的救星
- (2020-01-13) Omkar Sutar: easy to solve any queries
- (2020-01-08) Harish Singh: best tool to find the locators
- (2020-01-08) Annapurna Madgi: Hi Sanjay, I just came through this tool from your twitter account, and this is such a time saver. Thanks to you for developing such an amazing tool. I will share the details with my friends who still grapple around to find xpath's.
- (2020-01-08) Chakrapani Bandhu: Good
- (2020-01-08) Andole Krishna: its very good for test engineers
- (2020-01-07) Smita Doshi: Very helpful and great for automation beginners!
- (2020-01-05) Mushfique Rahman: good thing to find xpath in chrome. It saves a lot of time.
- (2020-01-04) Pierre KANOHA: It's a real great tool to reduce time at creating and maintaining tests
- (2020-01-03) Rohit Gupta: Very helpful tool, saves a lot of time
- (2020-01-02) Bhavesh Panchal: Very Useful Tool
- (2020-01-02) Kalista: muito bom
- (2020-01-01) Kalyan Maity: VERY GOOD
- (2019-12-26) kishore gowda: i have been using this from 20 days ,it was wonderful experience.i also recommend this to my friends.
- (2019-12-24) Amitesh Srivastava: It is a great tool and helping a lot for day to day automation tasks for QEs. The new features of 5.0 version are awesome, made things easier specially the recording and finding the xpaths in bulk one by one. Just a thought if it can give all the xpaths as soon as recording started of the entire page rather than clicking components one by one? What do you think about that, again the existing thing which you showed is great but to make things a step easier.
- (2019-12-22) Jian Gao: Just found this tool since firepath was discontinued. Looks nice so far! One of the concern that relates to long term support is, how can we (some in the testing community) trust this tool won't be like the firepath that it may discontinued again out of blue one day? It's just some worry in the back of my mind.
- (2019-12-20) Olga Ko: This tool is so helpful for me. Thank you, Sanjay! Well done.
- (2019-12-17) Dr. Jyoti Malik: just now downloaded it
- (2019-12-13) DJ Toonz: Seems to do the trick, now just curious as to how it can be used to help scrape content in an iframe that will not load on a separate window if you try to load the iframe src. i've been trying to find an app similar to the dataminer chrome extension that will allow scraping from iframe loaded content. any help or suggestions for a beginner in scraping.
- (2019-12-09) Karol Prokop: asoom
- (2019-12-06) Raju Yadav: Excellent add-on for chrome
- (2019-12-04) vara prasad: very useful for beginners to inspect the web elements
- (2019-11-04, v:5.0.9) Rahul Tomar: Unable to generate the xpath using chropath
Hi Sanjay/Team, we have a website which we have to automate but there are more then 100 radio button on one page and we have to select each radio button depends on it's description like we have "discontinuedByVendor" radio button for true/false ,"institutional" radio button for true/false. Here we are facing the issue that Id is changing after each page refresh and class is also not unique. I tried with chropath as well but it is not giving any relative or absolute xpath also css. Below is the message that we are getting:- Rel XPath :- It might be child of svg/pseudo/comment/iframe from different src. XPath doesn't support for them. Abs XPath :- It might be a child of iframe from different src & it is not supported currently. Your response will be highly appreciated. Thanks Rahul
- (2019-11-01, v:5.0.8) hari nath: not able see chropath tab in Elements tab
not able see chropath tab in Elements tab
- (2019-10-31, v:5.0.8) Pavan K: Can't see the features after adding to chrome
I didn't seen the xpath,css after adding it to the chrome, can you please help in fixing the issue ? Thank You
- (2019-08-30, v:5.0.7) Saran Bala: Getting error in downloading ChroPath
- (2019-08-22, v:5.0.7) Lea Gary: The ChroPath in the chrome developer's tool has an incorrect display
In my chrome browser, the chropath tools are all squashed together
- (2019-08-20, v:5.0.7) anoop: Not able to see Chropath on the development tool ribbon
Hello, I added the Chropath extension to my google Chrome. Re-started the chrome. But still not able to see the chropath when inspecting an element on google chrome. I am not sure, if i can attach a screenshot here of my screen.
- (2019-07-19, v:5.0.5) Mc.雨季: Interface incompatibility
Google Browser 75.0.3770.100 version, installation of this plug-in interface is incompatible, not fully displayed
- (2019-07-10, v:5.0.4) Sriharsha Kota: How do we find xpaths on mobile?
Hi Sanjay, I am currently automating my web based application on mobile device using Appium. How can Chropath help me to find out the elements/xpaths? Thanks.
- (2019-07-08, v:5.0.4) anusha mano: driver.findElement(By.xpath("It might be a child of svg/pseudo/comment/iframe from different src. XPath doesn't support for them."))
Hi Sanjay, The web application I create Selenium automation against uses iFrames. Chropath doesn't give the xpath is such scenarios, it says:driver.findElement(By.xpath("It might be a child of svg/pseudo/comment/iframe from different src. XPath doesn't support for them.")) Could you please help on this?
- (2019-05-09, v:5.0.3) Lipi Jain: Not able to see XPath
Hi , I have added chropath and getting this messge "It might be a child of svg/pseudo/comment/iframe from different src. XPath doesn't support for them."