Tip for finding & validating XPaths using Chrome's developer tools and extensions

Product Forums Tips & Tricks
,
1

This tip is meant to help those folks who are new to XPaths & CSS.
Make sure to checkout the many XPath & CSS tutorials available on the net.

First install all of the following:

  1. Chrome browser.

  2. ‘TruePath’ extension for Chrome.

  3. ‘CSS and XPath checker’ extension for Chrome.

Usage:

Start Chrome & open https://katalon-demo-cura.herokuapp.com

Press F12; Chrome developer tools page loads.

Right-click on the ‘Make Appointment’ button.

Select ‘Relative XPath’ > ‘Xpath with class, name, title’ > ‘//a[contains(.,“Make Appointment”)]’.

Click ‘Copy XPath’ button.

Open the ‘CSS and XPath checker’ extension (top right-hand side of the Chrome browser).

Click the ‘XPath’ radio button.

Paste the copied XPath into the input field.

The ‘Make Appointment’ button should be highlighted.

**Tips/Notes: **

  1. ‘TruePath’ can also be used for finding iframe XPaths.

  2. ‘CSS and XPath checker’ can be used for testing your own XPaths.

  3. ‘CSS and XPath checker’ can be used with Chrome’s ‘Inspect > Copy > Copy XPath’ or ‘Inspect > Copy > Copy Selector’.
    Open Chrome & the webpage under test:

Right-click any object; Click Inspect > Right-click on result > Copy > Copy XPath.

Right-click any object; Click Inspect > Right-click on result > Copy > Copy Selector.

Paste the copied XPath/CSS Selector into ‘CSS and XPath checker’.
The object should be highlighted.