FirePath is a FireBug extension to inspect and generate XPath locator, CSS Selectors and JQuery Selectors. So we must have Firebug installed in Mozilla Firefox browser.

Before going further into this tutorial it is necessary to understand basic functioning of FireBug. So here are some key factors which make FireBug a must have add-on :

1) Play with Live View Source : Though a browser provides a “View Source” window, but it doesn’t allow you real time HTML source. FireBug’s HTML tab gives you the Live interface to view HTML source as many elements are added, updated and removed based on the User action.


2) Find and Locate the desired Element : FireBug also gives you the option to inspect the element. In context of Automation, you can highlight the element on which you wish to perform the action. You can get the Element ID, generate CSS Selectors and DOM locators based on element’s various attributes.

3) FireBug also provides interface for CSS, DOM, Net and Cookies.

Installation of FireBug is simple and similar to FirePath. Once installed you can enable the panel by : Right click anywhere on the screen –> Select option “Inspect
Element with FireBug”

Coming back to FirePath, first let’s see how it is installed.

Installation Steps Of FirePath :

– Navigate to this URL “https://addons.mozilla.org/en-US/firefox/addon/firepath/”
– Click on “Add to Firefox” button.

firepath_add_to_firefox

– In top left corner you will see a fly-out asking you to install the add-on.

firepath_install

– After you click “Install”, you’ll need to restart the browser.

– Now right click on any element and select “Inspect Element with Firebug”. As mentioned below you can see “FirePath” option added after “Cookies”.

Using FirePath in extracting XPath Locator :

To demonstrate an example we will use our own very famous Search button from the right sidebar.

Generating Absolute XPath :

– Click on Inspect button and select Search icon as displayed below. By default FirePath produces Absolute XPath.

firepath_search_button

Generating Relative XPath :

As mentioned above by default FirePath keeps “Generate Absolute Path” option enabled. If you wish to produce Relative XPath, un-check this option and inspect the
element again through FireBug.

firepath_relative_XPath

This way we can extract XPath using FireBug and FirePath for any web element. Please share your feedback. Thank You & Happy Locating.


Share This Article :