Generate/search cssSelector and Xpath on Firefox 55 onward

As you know, Firebug extension is no long working on Firefox 55 and later. The latest version of Firebug is 2.0.19 which compatible with Firefox 30 – 54. So you may want to install the old Firefox build 54 , disable auto update and happy with the latest Firebug.

But it is quite inconvenience. So I will share you 2 tools that we can do the same functionalities of Fire Bug such as : inspect Element, generate css Selector or xpath of element, search an element using css/xpath…

The first tool is Firefox DevTools .This is the tool suggested by http://www.getfirebug.com .

“The Firebug extension isn’t being developed or maintained any longer. We invite you to use the Firefox DevTools instead, which ship with Firebug.next”

How to use Firefox Developer tool:

• Press F12 or right click on element and select “Inspect Element”.
• Click icon   to pick an element from the page. Then you can right click on Element in Inspector tab and select Copy (CSS Selector, XPath ) as you see in the screenshot above. however the XPath generated here is absolute XPath . so it is not useful for me.
• Search Element using css selector: Firefox Dev tool only allows us to search an element using CSS Selector. searching an Element using XPath is not supported yet. There is an enhancement S2 for this Bug 963933 . I hope they will add this feature soon.

XPath locator is very important for us. It is quite handy to handle some elements which there is no ID and cssselector cannot help. you have to do an XPath search, then walk up the DOM, then back down to get to the element you want.

Fortunately , there is another extension on Firefox can help us to generate and search xpath locator. It is AutoPager.

(this add-on also help to generate xpath: https://addons.mozilla.org/en-us/firefox/addon/element-locator-for-webdriv/)

How to use AutoPager Extension:

• Generate xpath of Element: right click on Element on the web page, select Auto Pager >XPath Utils > Create xpath. It will show the AutoPager window. you can get the xpath in Link XPath field. It also have a list of possible xpath and the number of match found. Make sure you select the one which have only one match found for your testing. You also can click on find button and pick an element on web page to generate xpath for it.
• Search xpath:  This is the feature that i use frequently . it is very handy. You can define your own xpath and paste it into Link XPath and enter to check if there is any element match with your defined xpath. Click … on the right of Link Xpath field, it will show you all functions used to define an xpath. I love it.  When you search xpath , make sure you are on the correct Frame.