How to verify an XPath expression in Chrome Developers tool or Firefox s Firebug

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

User · Answer

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.

User · Answer

By using Chrome or Opera without any plugins  without writing any single XPath syntax character  right click the required element  then  quot inspect quot  right click on highlighted element tag  choose Copy   Copy XPath

User · Answer

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

User · Answer

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    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 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    Install Firebug Install Firepath Press F12 to open Firebug Switch to FirePath panel In dropdown  select XPathor CSS Type in to locate

User · Answer

I verify XPath and CSS selectors using WebSync Chrome extension  It provides possibility to verify selectors and also to generate modify selectors by clicking on element attributes  https   chrome google com webstore detail natu-websync aohpgnblncapofbobbilnlfliihianac

[google-chrome] How to verify an XPath expression in Chrome Developers tool or Firefox's Firebug?

Firefox v66 (April 2019):

Chrome v69 (April 2019):

Examples related to google-chrome

Examples related to firefox

Examples related to selenium

Examples related to xpath

Examples related to selenium-webdriver