how to inspect element in selenium3.6 as firebug i

Question

I am trying to find a way to use firebug for FF. Unfortunately it's not supported for selenium 3.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

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

Answer 2

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 DevTools [F12] which comes integrated with the Mozilla Firefox 56.x + releases onwards.

Example Usage :

Now, let us assume we have to identify the xpath or cssSelector of the Search Box WebElement on Google Home Page.

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, in the Elements tab, click on the Inspector and then point to the Search Box WebElement.
4. Copy the XPath (absolute) or selector (absolute) and paste it in a textpad.
5. Construct a logical unique xpath or a cssSelector.

6. 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("logical_unique_xpath_of_search_box_element")
   

7. (Alternative to 6) 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:

   $$("logical_unique_cssSelector_of_search_box_element")
   

8. Example: To find the Search Box on Google Home Page through xpath try :

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

9. (Alternative to 8) Example: To find the Search Box on Google Home Page through cssSelector try :

   $$("#lst-ib")
   

10. The WebElement must get identified by the xpath and/or cssSelector will be reflected and should be returned as result.

11. Example : The following will be returned back on the Console :

    [input#lst-ib.gsfi]
    

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

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.