How to verify an XPath expression in Chrome Develo

Question

How can I verify my XPath?

I am using Chrome Developers tool to inspect the elements and form my XPath. I verify it using the Chrome plugin XPath Checker, however it does not always give me the result. What is a better way to verify my XPath.

I have also tried using Firebug to inspect the bug and also using the FirePath to verify. But does Firepath also verify the XPath.

My last option would be to use the Selenium WebDriver to confirm my XPath.

Answer 1

Chrome

This can be achieved by three different approaches (see my blog article here for more details):

• Search in Elements panel like below
• Execute $x() and $$() in Console panel, as shown in Lawrence's answer
• Third party extensions (not really necessary in most of the cases, could be an overkill)

Here is how you search XPath in Elements panel:

1. Press F12 to open Chrome Developer Tool
2. In "Elements" panel, press Ctrl+F
3. In the search box, type in XPath or CSS Selector, if elements are found, they will be highlighted in yellow.

Firefox

1. Either select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X)
   or press the Ctrl+Shift+K (Command+Option+K on OS X) keyboard shortcut.

2. In the command line at the bottom use the following:

   • $(): Returns the first element that matches. Equivalent to document.querySelector() or calls the $ function in the page, if it exists.

   • $$(): Returns an array of DOM nodes that match. This is like for document.querySelectorAll(), but returns an array instead of a NodeList.

   • $x(): Evaluates an XPath expression and returns an array of matching nodes.

---

Firefox (prior version 49)

1. Install Firebug
2. Install Firepath
3. Press F12 to open Firebug
4. Switch to FirePath panel
5. In dropdown, select XPathor CSS
6. Type in to locate

Answer 2

Here is the ChroPath extension for Chrome which have many advanced features compare to FirePath- Please follow the steps below : 1) Open devtools panel. 2) Right-click anywhere on the webpage. 3) Click Inspect. 4) In the right side of Elements tab, click on ChroPath tab. Here you will get the XPath/CSS and you can also edit and evaluate it.

Download addon

Answer 3

Another option to check your xpath is to use selenium IDE.

1. Install Firefox Selenium IDE
2. Open your application in FireFox and open IDE
3. In IDE, on a new line, paste your xpath to the target and click Find. The corresponding element would be highlighted in your application

Answer 4

By using chrome or Opera

without any plugins, without writing any single XPath syntax character

1. right click the required element, then "inspect"
2. right click on highlighted element tag, choose copy>Copy Xpath.

;)

Answer 5

You can open a Console in Chrome and Firefox, and check the XPath by typing $x("your_xpath_here"). This will return an array of matched values. If it is empty, you know there is no match on the page.

For example:

Update (March 2016):
A new screenshot from Chromium v48:

*

Answer 6

I verify XPath and Css selectors using Natu WebSync extension for Chrome.

It can:

• split selector to parts and verify them separately
• show with color how many elements are found for each selector part. 0 - Red, 1 - Green, several - Yellow
• highlight elements on the page when I hover selector part
• navigate to selector element in Elements tab when I click selector part

It can be very useful for those who need to write and verify complex selectors.

https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac