How to get DOM element Xpath in Firefox

Question

It might be just me but I can't find any way to get DOM element's XPATH in Firefox.

That was possible in Firebug, but now it's deprecated in favor of Firefox Developer Tools, and the recommendation is not to use it any longer.

So, is there any way to get XPATH in Firefox and its Developer Tools?

Answer 1

This feature is available in the Firefox DevTools since Firefox 56. To copy the Xpath of an element, right-click it within the Inspector and choose Copy > Xpath from the context menu.

In earlier versions of Firefox the option was placed in the first level of the context menu. As more copy options got added, they were moved into the Copy submenu.

Answer 2

Open the developer tools in Firefox, then:

1. Click on Console tab.
2. Type allow paste if you are pasting anything.

3. Type the XPath like so:

   $x("path")
   

   For example:

   $x(".//*[@id='4th']/tbody/tr[1]/td")
   

Firebug also works well, so I suggest using that instead.

Answer 3

You can get the XPath in Quantum by right-clicking on the element html in Inspector and select Copy > XPath. For eg.

For instance the html below will give you the Xpath as - /html/body/form/table/tbody/tr[2]/td[2]/table/tbody/tr[2]/td/table1/tbody/tr[4]/td1

Answer 4

You can also get an earlier version of firefox using from the release page.
Make sure you disable auto update otherwise your browser will upgrade to new one.

Answer 5

You can also use the X path Add-on https://addons.mozilla.org/nn-NO/firefox/tag/xpath to get the x path

Answer 6

Even if there is no extension available for Firbug in Firfox V57/Quantum. Still we can performed same operation which we performed earlier with the help of firebug, in Firefox dev tool now. Firefox dev tool has more advanced function than normal browser. So It will be helpful for UIDesigner or any Developer.

Features in Developer Tool-Features in Developer Tool

To install & Download Firefox Developer Tool- Firefox Developer Tool

For XPath: Select any element by right click on it and choose Inspect Element(Q) then element/tag gets highlighted under inspector developer tool. Then Right Click on tag and select Copy=>Xpath or CssPath.

but the xpath or Css provided by above option will not be correct always if application is dynamic or having dynamic ids etc... So better to use console option/ select console option (Press F12) write allow paste and enter.

For Xpath =>we have to use ($x) example: >>$x("//p") It will gives all p tag.

For Css path=> we have to use ($$) Example: >>$$("p") then Enter It will gives all p tag.