How to Install True Path and ChroPath

We have different tools are available in market to identify the object on web page.

Google Chrome Developers Tools

To spy an element on webpage

Startup Google Chrome.

Go to: http://newtours.demoaut.com/

In Chrome, click on More Tools>Developer Tools.

Or click on F12 function key

Click on the inspect-element icon as displayed in the image below.

After clicking on the inspect-element icon, click on the web element to be located e.g. Google Search box. Once we click on the element, its HTML will get displayed in the Chrome Development Tool UI.

Here, we can see the different attributes of the web elements like - id, class, type along with its tag like input, div etc. Now, we will be using these tags, attributes and their values to locate elements using different locators.

Test your XPath expression in Google Chrome in different options

Option 1:

To test your XPath expressions in Google Chrome, you can use the $x syntax in then console to return your XPath element matches:

Click on the Console tab and type the following:

$x(“//input[@name=’q’]”)

If a match is found, the console will return the element info. If no match was found, it will display empty brackets [].

Option 2:

To test your XPath expressions in Google Chrome, you can press Alt + F4 function then type the XPath expression in Find by XPath bar

If a match found it will get highlight in yellow color and give the no of matches . if no match was found it will display 0 of 0

How to Add on Chrome path to google Chrome

Chrome Path

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.

Enter below path in google chrome address bar

https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlkcjo?hl=en

click on Add to Chrome button in right corner of the page.

Click on Add Extension button

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.

How to Add on TruePath to google Chrome

What Is TruePath

TruePath is a web extension designed for Chrome & Firefox browser.

What It Do

Once installed when a user right clicks on any web element on the web page, it will display all the XPath as context menu items.

Below is the Link for Add to chrome as an extension

https://chrome.google.com/webstore/detail/truepath/mgjhkhhbkkldiihlajcnlfchfcmhipmn

click on Add to Chrome button