A developer often needs to build XPath of a web element. XPather, a FireFox add-on, comes to the rescue. XPather quickly generates XPath of an element, allowing more functionality too.  

Installation

It took me altogether over an hour to install the XPather. The first thing I encountered on opening XPather is that it isn’t compatible with the present version of FireFox (15.0).  Reading down the product page, I found this about XPather, “… since FF3, it requires ‘DOM inspector’ plugin“. After installing that, it still didn’t work. I checked the add-on reviews with many asking about the same issue. Eventually, thanks to sammingo and yk2000, who clarified the process of patching:

1. Right click on “Add to Firefox” button and ‘Save link as’. This will save the .xpi package file.
2. Use 7zip or any other unzipping tool to extract the content.
3. Edit the install.rdf file from the package: I changed the install.rdf file’s line (see the picture below) pertaining to FF maxVersion to this:
   <em:maxVersion>15.*</em:maxVersion>. Shortcut is to edit the zipped package file (F4 if using 7zip) and save the install.rdf right there.
4. Zip the content back to a zip file and rename it to .xpi (unless shortcut created).

How It Works

1. Generate XPath

Suppose you need to find an XPath of ‘NASDAQ 100 PMI’ element at www.nasdaq.com. First, open the page in FF. Right-click on HTML element and choose ‘Show in XPather’:

2. XPather Browser Window

The browser window will appear. Here you’ll see the XPath and the node content:

XPather is good for showing the detailed XPath, with all the attributes and corresponding values:

To select/deselect some features and attributes click on the XPath button at the upper-left corner and do/undo checking (see picture at right).

3. Multiple Choice

For multiple nodes choice, go to upper input area (right by XPath button) and edit XPath. Custom XPath entry selects multiple nodes at your choice. Don’t forget to click the ‘Eval‘ button for an XPath evaluation.

4. Relative XPath

A semi-transparent contextual menu is available when right-clicked at a matching node (Copy XPath, Blink the Node, etc. ). If you choose ‘Set a Node as Parent‘, XPath entry jumps into ‘Parent’ input area, making it possible to define a relative XPath in the upper input area. See the picture at the bottom:

Conclusion

The XPather is a convenient tool to both evaluate page element’s XPath and find the multiple DOM nodes through custom XPath. We didn’t learn how to find XPath for multiple elements if selected in FF browser. Compare this product to Scraper, the Google Chrome extension, which provides such a feature (by selecting several elements in GC and right-clicking ‘Scrape similar’, the output will be generated with XPath(s) of extracted elements).