How to verify an XPath expression in Chrome Developers tool or Firefox's Firebug?
Solution 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$$()
inConsole
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:
- Press F12 to open Chrome Developer Tool
- In "Elements" panel, press Ctrl+F
- In the search box, type in XPath or CSS Selector, if elements are found, they will be highlighted in yellow.
Firefox (since version 75)
Since FF 75 it's possible to use raw xpath query without evaluation xpath expressions, see documentation for more info.
Firefox (prior version 75)
- 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. -
In the command line at the bottom use the following:
$()
: Returns the first element that matches. Equivalent todocument.querySelector()
or calls the$
function in the page, if it exists.$$()
: Returns an array of DOM nodes that match. This is like fordocument.querySelectorAll()
, but returns an array instead of aNodeList
.$x()
: Evaluates an XPath expression and returns an array of matching nodes.
Firefox (prior version 49)
- Install Firebug
- Install Firepath
- Press F12 to open Firebug
- Switch to
FirePath
panel - In dropdown, select XPathor CSS
- Type in to locate
Solution 2
You can open the DevTools in Chrome with CTRL+I on Windows (or CMD+I Mac), and Firefox with F12, then select the Console
tab), 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.
Firefox v66 (April 2019):
Chrome v69 (April 2019):
Solution 3
By using Chrome or Opera
without any plugins, without writing any single XPath syntax character
- right click the required element, then "inspect"
- right click on highlighted element tag, choose Copy → Copy XPath.
;)
Solution 4
Another option to check your xpath is to use selenium IDE.
- Install Firefox Selenium IDE
- Open your application in FireFox and open IDE
- In IDE, on a new line, paste your xpath to the target and click Find. The corresponding element would be highlighted in your application
Related videos on Youtube
user3448242
Updated on November 09, 2020Comments
-
user3448242 over 3 years
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.
-
Jens Erat about 10 yearsJust one warning on XPath and browsers, as this leads to lots of confusion: stackoverflow.com/questions/18241029/…
-
Yi Zeng about 10 years@JensErat: Really good point. For others reading this comment, as already mentioned in that question, Selenium is not affected because it drives browsers and uses the same underlying JavaScript evaluation technology with dev tools.
-
djangofan about 10 yearsThis method isn't ideal but it is good to know because whatever xpath expression you write in that console can be executed by a JavascriptExecutor in Selenium. Sometimes you can use that as a workaround, perhaps when Firefox native events are disabled?
-
Arran about 10 years@djangofan, how do you mean? By that logic both of these answers, although correct, are unnecessary by your logic.
-
JacekM about 10 years@user1177636: What software did you use for generating these GIFs?
-
tuxErrante over 7 yearsIf you need a local parser for XQuery too I've found BaseX: basex.org/products
-
Automationtested almost 7 yearsFor Chrome, this is the BEST solution I have seen yet. Thanks for sharing. Makes it easier to confirm in Chrome when I don't wish to use Firefox.
-
ouflak almost 7 yearsI have used this to great benefit. But the one big problem is that sometimes the context menu is disabled or overwritten. Then you have to rely on the other approaches.
-
derloopkat over 6 yearsAnswer needs an update for Firefox. Unfortunately Firebug is obsolete and has been merged into Developer Tools. Currently you can test xpath expression in Console, e.g.
$("//div")
-
Major Major about 5 yearsThis doesn't really answer the question. It isn't verifying an existing xpath, it's generating one. The one that Chrome generates is often ugly and very fragile when a much better solution exists.
-
YasserKhalil almost 5 years@bosnjak when trying this in console
$x("//input[@name='q']")
I gotVM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
-
bosnjak almost 5 years@YasserKhalil which browser are you using, which version? What site are you doing this on?
-
Treer over 4 yearsderloopkat's answer is the best for me, but it's missing an "x" - it should be
$x("//div")
. XPath expressions can be tested in the console with$x("expr")
and css expressions with$$("expr")
-
Peter Mortensen over 3 yearsThe link is broken (404).