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: