• 

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

• 

  In the right side of Elements tab, click on ChroPath tab which will be the last tab.

• 

  To generate selectors, inspect element or click on any DOM node, it will generate the unique relative XPath and all possible Selectors with their occurrences. Scroll in ChroPath panel to see all generated Selectors.

• 

  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 total number of 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.

• 

  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.

• 

  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.

• 

  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.

• 

  Copy the locators just by clicking on copy icon.

• 

  Click on edit icon if want to edit any locator.

• 

  This is the XPath for the 1st matching node of your selector.

• 

  It is really helpful in multiple scenarios. For ex-

• 

  If you don’t know how to write robust unique relative xpath & you have written XPath using indexes or dynamic attributes then CP will suggest the best relative xpath.

• 

  If you are trying to verify //a and it found 100 matching elements then CP suggested XPath will be the XPath for 1st link.

• 

  CP suggested XPath will be the robust and unique as it is generated from ChroPath relative xpath algorithm.

• 

  With help of this feature one can save lot of time and learn how to write robust unique relative XPath.

• 

  Enter the attribute name with which you want to generate the relative xpath in the attribute name box.

• 

  There are shortcuts for few attributes. For ex- If you don’t want relative xpath with id then uncheck the id checkbox, CP will generate the relative XPath without id.

• 

  If you want to generate XPath without text/label, just uncheck the text checkbox.

• 

  Your attribute preference will be saved so next time when you will open

• 

  CP, it will generate with the preset attributes preference.

• 

  You can reset the attribute values to default by clicking on reset button.

If inspected element is inside iframe,

• 

  CP will show “inside iframe” text in selector box.

• 

  It will highlight the inspected element in orange dotted outline.

• 

  CP will generate xpath for the iframe inside which the inspected element exist along with xpath for inspected element.

• 

  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.

• 

  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.

• 

  Click on the set driver command icon (+ icon, just below selector box) in ChroPath tab.

• 

  Now when you will generate selectors, it will generate selectors with pre-command like driver.findElement(By.xpath(‘xpathValue’)) appended in selectors.

• 

  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.

• 

  Now just by clicking on copy icon you got full automation step.

• 

  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.

• 

  Click on the record button (circular icon) in ChroPath tab.

• 

  Now just inspect all the elements one by one or click on DOM node for which you want to generate the XPaths.

• 

  It will generate xpath along with label name.

• 

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

• 

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

• 

  Click to CopyAll icon given in header to copy all xpaths value.

• 

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

• 

  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 delete your recorded selectors but if you will close the devtool then you will loose them.

• 

  Click on DeleteAll icon to clear all the rows.

• 

  You can also stop recording at anytime just by clicking on ON/OFF button.

• 

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

• 

  Click on the record button (circular icon) in ChroPath tab.

• 

  Now just inspect all the elements one by one or click on DOM node for which you want to generate the XPaths.

• 

  It will generate xpath along with label name.

• 

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

• 

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

• 

  Click to CopyAll icon given in header to copy all xpaths value.

• 

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

• 

  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 delete your recorded selectors but if you will close the devtool then you will loose them.

• 

  Click on DeleteAll icon to clear all the rows.

• 

  You can also stop recording at anytime just by clicking on ON/OFF button.

• 

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