Locators (Basic)

The success of GUI automation depends on identifying and locating the GUI elements from the application and performing operations on them. As Selenium parses the DOM (Document Object Model) to get the property of the desired element while interacting to the element on the web page, and for that we need a mechanism to get those properties. Selenium provides different types of locators to accomplish this task. In this blog we will discuss about the basics of locators, types of locators, and how to use locators.

 

Before we start exploring locators, we need to analyse the page and elements to understand how these are structured in the application, what kind of properties or attributes are defined for the elements. Browsers render the elements of the application for the end users by hiding the HTML and other resources, and when we need to interact with the application using automation using Selenium Webdriver, we need to look very carefully to the background code that has been written to render elements in browsers.

 

We can view the code written for a page by right-clicking in the browser and selecting the View Page Source option. But the displayed code might look messy and difficult to understand, and for that we need some special tools that can display the code in a structured manner.

 

Different browsers have their in-built tool to inspect the element. Below are the various ways to inspect the element from the code:

1. Inspecting elements with Firefox:
The newer versions of Firefox provide in-built ways to analyse the page and elements, however it is recommended to use the plug-in available for Firefox, i.e. Firebug.

2. Inspecting elements with Google Chrome:
Google Chrome provides an in-built feature just like Firefox to inspect elements. Move the cursor to desired element on the page and right-click to open the pop-up menu, and then select inspect element option.

3. Inspecting element with Internet Explorer:
Internet Explorer also provides feature to inspect element same as the other browsers. Click F12 key to open the Developer Tool and select the arrow icon and hover over the desired element.

 

We can inspect elements on different browsers in similar fashion. For, this blog demonstration purpose we will use Firefox. Follow the steps mentioned below:

1. Install the Firebug plug-in. In addition also install the Firepath plug-in to find the CSS and XPath of element.

2. Launch the desired page in Firefox, right-click on desired element and select option Inspect Element with Firebug. It will highlight the elements code in lower part of your browser.

 

Now, see the code snippet prepared just for demo purpose.

 

 

In this HTML code snippet we can see that we have few elements on the page, such as UserName textfield, Password password field and a Submit button, and all have some attributes defined. We will use those attribute to find the element on the page to simulate user actions. Now, using this HTML code we will see how to use different Locators to find the elements.

 

Types of Locators:

1. Locate Element by ID : Using the ID attribute is the most preferable way to locate element on a page. The W3C standard recommends that developers should provide an id attribute for elements that are unique to each element. This is the fastest locator strategy.

In Selenium Webdriver, we use findElement() and findElements() method to locate the element on a page.

 

Eg: WebElement username = driver.findElement(By.id(“username”));

 

Here, WebElement is the type to store the element reference, driver is WebDriver object to facilitate the findElement() method.

 

2. Locate Element by Name : you might find situations where you cannot use the id attribute due to the following reasons:

• Not all elements on a page have the id attribute specified.
• The id attributes are not specified for the key elements on a page.
• The id attribute values are dynamically generated.

So, in these cases we need to use some other attributes to find the elements.

 

Eg: WebElement username = driver.findElement(By.name(“password”));

 

3. Locate Element by Class : The scenario added to previous point in which we need to use some other attributes to find elements on a page, we can also use Class attribute. The Class attribute is provided to apply CSS (Cascading Style Sheet) to an element.

 

Eg: WebElement username = driver.findElement(By.className(“login”));

 

4. Locate Element by CSS : CSS is a style sheet language used for describing the presentation semantics of a document written in a markup language such as HTML or XML. As mentioned earlier to install Firepath to find CSS or XPath easily. We can use Firepath to find CSS Path as well.

 

Finding by absolute CSS path
Eg: WebElement username = driver.findElement(By.cssSelector(“html body form input”));

 

Finding by relative CSS path
Eg: WebElement username = driver.findElement(By.cssSelector(“input”));

 

5. Locate Element by XPath : XPath, the XML path language is a query language for selecting nodes from an XML document. Use Firepth to find the XPath for any element.

 

Eg: WebElement username = driver.findElement(By.xpath(“html/body/form/input”));

 

As used in CSS example, we can also use absolute and relative path here for XPath.

 

In coming blogs we will discuss about more locators in detail.