Each of the browser types has an Inspector tool to use when building the locators. There are also various third-party plugins for each browser in the open-source world.
Let's look at one of the browser add-ons. Firefox has Firebug, Firepath, and Page Inspector. These plugins provide additional capabilities to users for building and "testing" locators. Page Inspector and Firebug allow users to edit, debug, and monitor CSS, HTML, and JavaScript in web pages. Firepath allows users to edit, inspect, and generate XPath, CSS, and jQuery expressions.
Here are some links to different browser development tools:
- Firefox Developer Tools are located at https://developer.mozilla.org/en-US/docs/Tools
- Safari Developer Tools are located at https://developer.apple.com/safari/tools/
- Chrome Developer Tools are located at https://developer.chrome.com/devtools
- Edge WebDriver Tools are located at https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/
- Opera Developer Tools are located at http://www.opera.com/dragonfly/
We will discuss how to use the locators later on using partial text strings, multiple attributes, CSS, and XPath queries. Let's look at the mobile inspectors for getting locators for mobile pages.