How to inspect element for Selenium v3.6 as FireBug is not an option any more for FF 56?

Question

I am trying to find a way to use FireBug for FF. Unfortunately it's not supported for selenium v3.6. What can be done if I have to locate the elements, will "Inspect" element will be sufficient?

If I get down to less version of selenium, will that help?

Answer 1

If you visit the GitHub Page of FirePath, it clearly mentions that :

FirePath is a Firebug extension that adds a development tool to edit, inspect and generate XPath expressions and CSS3 Selectors

Now if you visit the Home Page of FireBug, it clearly mentions that :

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.

So the direction is clear that, we have to use Development Tools which comes integrated with the Mozilla Firefox 56.x + release onwards.

---

Example Usage :

Now, let us assume we have to identify the xpath or cssSelector of the Search Box on Google Home Page https://www.google.com/.

1. Open Mozilla Firefox or Google Chrome browser and browse to the url https://www.google.co.in
2. Press F12 or Ctrl+Shift+I to open the Developer Tools
3. Within the Developer Tools console, with in the Elements tab, once you click on the Inspector and mouse hover the Search Box and the WebElement pertaining to the Search Box gets highlighted within the DOM Tree.

4. Within the HTML DOM you can right click and on mouse hover over Copy item you can clck on either of the following sub menu item:

   • Copy selector: To copy the CssSelector (absolute)
   • Copy XPath: To copy the XPath (absolute)

5. Snapshot:

---

Additional Steps

Referring the copied CssSelector or XPath you can also construct a logical unique XPath or a CssSelector.

---

Testing your own XPath

To test your own written XPath, within the Developer Tools console, click on the Console tab and within the editor paste the logical unique xpath you have constructed in the following format and hit Enter or Return:

$x("//*[@name='q']")

Example:

---

Testing your own CssSelector

To test your own written CssSelector, within the Developer Tools console, click on the Console tab and within the editor paste the logical unique cssSelector you have constructed in the following format and hit Enter or Return:

$$("[name='q']")

Example:

Answer 2

ChroPath extension for xpath and best replacement for FirePath. It has no dependency on other extension like firepath was dependent on firebug. Just add ChroPath to Chrome browser and use it.

Download link- ChroPath

Features-

1. gives unique xpath and css selectors
2. It opens as sidebar tab in devtools panel where you can access DOM, inspect element in left side and write the XPath/CSS in right side.
3. verify xpath and css selectors
4. gives the list of matched node
5. highlight the web element on hover
6. scroll the hidden element in view area on hover.
7. ChroPath is the only extension which gives unique CSS selectors for selected or inspected element.

Answer 3

Try this step in your case and check.

1. Open A Blank Tab in Firefox
2. Type about:config in address bar then press enter (click on I accept the risk!)
3. Find browser.tabs.remote.autostart
4. Select the option then click the mouse right side
5. Turn The Option As False
6. Close the browser for restart browser
7. Open browser again, inspect the element. I hope It Works Properly.

Answer 4

Inspect element is sufficient if you only want to inspect element. I found Firepath helpful with testing the locators. Downgrading to Firefox 30 – 54 should be enough. It has nothing to do with Selenium version.

Also you can look at Chropath for Chrome