Before we start exploring how to find elements on a page, we need to analyze the page to understand the Document Object Model (DOM) tree, what properties or attributes are defined for the elements displayed on the page, how JavaScript or AJAX calls are made from the application, and so on.
Browsers use the HTML code written for the page to render visual elements in the browser window. It uses other resources, including JavaScript, CSS, images, and so on, to decide the look, feel, and behavior of these elements.
Here is an example of a BMI Calculator application page and the HTML code written to render this page in a browser, as displayed in the following screenshot:
You can view the code written for a page by right-clicking in the browser window and selecting the View Page Source option from the pop-up menu. This will display the HTML code of the page in a separate window, as shown in the following screenshot:
We need tools that can display this information in a structured and easy to understand format. In this recipe, we will briefly explore some of these tools before we dive into locators and finding elements.
In the following sections, we will explore some of the tools that are available inbuilt in browsers or as Plugins to analyze elements and page DOM trees, JavaScript calls, CSS Style attributes, and so on.
The newer versions of Mozilla Firefox provide in-built ways to analyze the page and elements; however, we will use the Firebug add-on, which has more powerful features.
You need to install the Firebug add-on in Firefox from https://addons.mozilla.org/en-us/firefox/addon/firebug/.
To inspect an element from the page, move the mouse over the desired element and right-click to open the pop-up menu. Select the Inspect Element with Firebug option, as shown in the following screenshot:
This will display Firebug with HTML code in a tree format, as shown in the following screenshot:
Using Firebug, we can also validate the XPath or CSS Selectors using the search box shown in the Firebug section. Just enter the XPath or CSS Selector and Firebug will highlight element(s) that match the expression, as shown in the following screenshot:
Firebug provides various other debugging features. It also generates XPath and CSS selectors for elements. For this, select the desired element in the tree, right-click, and select the Copy XPath or Copy CSS Path option from the pop-up menu, as shown in the following screenshot:
This will paste the Firebug-suggested XPath or CSS selector value to the clipboard.
Google Chrome provides an in-built feature to analyze pages and elements. This is very similar to Firebug but much more powerful. You can move the mouse over a desired element on the page and right-click to open the pop-up menu, then select the Inspect element option. This will open Developer tools in the browser, which displays information similar to that of Firebug, as shown in the following screenshot:
Similar to Firebug in Firefox, we can also test XPath and CSS Selectors in Google Chrome Developer tools. Press Ctrl + F (on Mac, use Command + F) in the Elements tab. This will display a search box. Just enter the XPath or CSS Selector, and matching elements will be highlighted in the tree, as shown in the following screenshot:
Chrome Developer Tools also provide a feature where you can get XPath for an element by right-clicking on the desired element in the tree and selecting the Copy XPath option from the pop-up menu.
Similar to Google Chrome, Microsoft Internet Explorer also provides an in-built feature to analyze pages and elements.
To open the Developer Tools, press the F12 key. The Developer tools section will be displayed, as shown in the following screenshot:
To inspect an element, click on the pointer () icon and hover over the desired element on the page. Developer tools will highlight the element with a blue outline and display the HTML code in a tree, as shown in the following screenshot:
Browser Developer tools come in really handy during the test script development. These tools will help you in finding the locator details for the elements with which you need to interact as part of the test. These tools parse the code for a page and display the information in a hierarchal tree. These tools also provide information on how styles have been applied, page resources, page DOM, JavaScript code, and so on.
Some of these tools also provide the ability to run JavaScript code for debugging and testing.
In the following recipes, we will explore various types of locators that are supported by Selenium WebDriver. These tools will help you in finding and deciding various locator strategies or methods provided by Selenium WebDriver API.