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

by

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.

inspector

  1. 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)

  2. Snapshot:

copy_xpath_selector

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:

XPath

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:

CssSelector

More Related Contents:

  1. Unable to find a matching set of capabilities with selenium 3.4.3, firefox 54.0 and gecko driver 0.17
  2. Reached error page: about:neterror when trying to navigate to other tabs if there is a form submit under that tab
  3. org.openqa.selenium.ElementNotInteractableException: Element could not be scrolled into view when trying to click a button
  4. org.openqa.selenium.SessionNotCreatedException: Unable to find a matching set of capabilities while initiating Firefox v37 through Selenium v3.11.0
  5. What Is Selenium And What Is WebDriver?
  6. What is the difference between WebDriver and WebElement in Selenium?
  7. NoSuchElementException, Selenium unable to locate element
  8. How does chrome driver interact with Chrome browser?
  9. Can’t open browser with Selenium after Firefox update
  10. How to run Selenium WebDriver test cases in Chrome
  11. Selenium WebDriver 3.4.0 + geckodriver 0.18.0 + Firefox ?? – which combination works?
  12. Can Selenium WebDriver open browser windows silently in the background?
  13. Page load strategy for Chrome driver (Updated till Selenium v3.12.0)
  14. Clarification of the cause of mixing Implicit and Explicit waits in Selenium doc
  15. What is benefit of using ChromeDriver over WebDriver if we are using only Chrome Browser in our Selenium Automation Script
  16. How to install extension permanently in geckodriver
  17. Selenium and non-headless browser keeps asking for Captcha
  18. Need to find element in selenium by css
  19. What is the internal working difference between Implicit Wait and Explicit Wait
  20. ERROR:ssl_client_socket_openssl.cc(1158)] handshake failed with ChromeDriver Chrome browser and Selenium
  21. What is the difference between a CSS selector and XPath? And which is better with respect to performance for cross-browser testing?
  22. org.openqa.selenium.InvalidCookieDomainException: Document is cookie-averse using Selenium and WebDriver
  23. What is the difference between a CSS and XPath selector? And which is better with respect to performance for cross-browser testing?
  24. I need to find an element in Selenium by CSS
  25. selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 80
  26. Get PID of Browser launched by selenium
  27. Is there a Selenium WebDriver available for the Microsoft Edge browser?
  28. selenium implicitly wait doesn’t work
  29. How does Selenium WebDriver’s isDisplayed() method work
  30. isElementPresent is very slow in case if element does not exist.

Leave a Comment