Locators in Selenium WebDriver
By Archana Gore
What are Locators?
Locators are addresses that identify web elements uniquely on a web page. It is an argument passed to findElement/ findElements methods. Let’s say we want to automate a webpage for testing, then Identification of GUI elements (say Text box, buttons, checkboxes, drop-down, radio buttons) is a prerequisite to act on. But it is more difficult than it looks. Selenium provides various Locators to accurately locate GUI elements.
Below are the Locators provided by Selenium Web Driver:
In this blog, we will be seeing default locators only. Which is id, name, link text, partial link text, class name, and tag name. Click here to learn about CSS Selector and XPath.
Providing steps to inspect and locate elements on a web page:
Step 1: Open the webpage on a browser of your choice
Step 2: right click anywhere on a web page then select inspect from the context menu. Which should open the browser’s developer tools panel.
Step 3: Locate the element in the HTML structure: In the developer tools panel you should see a variety of tabs and panels. The “Inspector” or “Elements” tab is selected by default, displaying the HTML structure of the webpage.
Use the mouse cursor to navigate the HTML structure or use the search functionality within the developer tools to find the desired element. You can click on elements in HTML structure to highlight them on the webpage.
Locating by ID
It is the most commonly used locator Since the ID is unique for each element on a webpage.
Here I am using a demo site called SauceDemo.com for testing.
Syntax:
driver.findElement(By.id(“attribute value”));
Ex. In the below screenshot to locate and send a text to Username, I am using the “id” Locator.
“standard_user” is the text entered into the text box using the sendKeys method with the help of ID “user-name”(value of id attribute).
Locating by Name
Locating elements by name is similar to locating by id.
Syntax:
driver.findElement(By.name(“attribute value”));
Ex. In the below screenshot to locate and send a text to the Password, I am using the “Name” Locator.
“secrete_sauce” is the text entered into the text box using the sendKeys method with the help of the name “password”(value of name attribute).
Locating by Link text and Partial Link text
These two locators are used to locate links on a web page. Links or hyperlinks are identified by using <a> tag in the HTML structure. To use these locators, we have to pass the visible text of the link.
Locating by Link Text
Link text locates the anchor elements whose visible text matches the search value. Link text uniquely locates the link present on the web page.
Syntax:
driver.findElement(By.linkText(“visible text”));
Ex. In the below screenshot to locate and click on the link, I am using the “link text” Locator.
Here, “Sauce Labs Backpack” is the visible text used to locate and click the Hyperlink.
Locating by Partial Link text
Partial link text is similar to link text, except we pass a portion of the visible text to locate hyperlinks.
Since we use a portion of the visible text there are chances of matching multiple elements. So, it is not always preferred.
Syntax:
driver.findElement(By.partialLinkText(“portion of visible text”));
Ex. In the below screenshot to locate and click on the link, I am using the “partialLinkText” Locator.
In the above screenshot highlighted text shows hyperlinks.
The above screenshot shows highlighted text is the visible text.
Here, “Sauce Labs Bolt” is the portion of the visible text used to locate and click the Hyperlink “Sauce Labs Bolt T-Shirt”.
Here we can use “Sauce Labs” as visible text, but as we can see in the screenshot it matches multiple elements (Backpack, Bolt T-Shirt, Onesie).
That’s the reason partial link text is not always recommended.
Note: visible text is not necessarily used from start to end. It can be used from middle to end too.
Ex. “Sauce Labs Bolt T-Shirt” can be used as “Bolt T-Shirt”, “T-Shirt” or “Labs Bolt”.
Locating by className
The “class name” locator locates the elements whose class name contains the search value. This locator is especially used to locate more than one matching element. It may match a single element but mostly matches multiple elements on the web page.
Note: Compound class names are not permitted to locate by using the “class name” locator.
Here, you see a space between “product-thumb” and “transition” which means it is a compound class name.
Syntax:
When returning single element: driver.findElement(By.className(“class name attribute value”));
When returning multiple elements:
List<WebElement> element= driver.findElements(By.className(“class name attribute value”));
Ex. As shown below screenshot locate the Logo by using the “class name” locator.
Here it matches with the single element. So, using the findElement method.
Here “login_logo” is the name of the class. The “Swag Labs” logo is located by using the “class name” locator with the help of the “ isDisplayed()” method.
Locating by Tag name
The “TagName” locator is used when you want to locate the elements based on their HTML tag name. It is especially used to locate more than one matching element.
Ex. When you want to count or get all of the links or images present on the web page then it is done with the help of the “<a>” tag (contains links on the web page) or “<img>” tag (contains images on the web page).
It is useful in scenarios where you want to target specific types of elements on a webpage, like finding specific types of input elements which are located using the “<input>” tag, navigating through the table elements which is done using “<tr>”, “<td>” tags, checking for the presence of heading elements using “<h1>” tag.
Note: if you are using the “tagName” locator alone then sometimes it matches multiple elements if there are multiple elements with the same tag name. In such cases, you may need to use additional locators or strategies to identify the desired element accurately.
Syntax:
When returning single element: driver.findElement(By.tagName(“name of the tag”));
When returning multiple elements:
List<WebElement> element= driver.findElement(By.tagName(“name of the tag”));
Ex. locating all of the links available on a web page
Here, we are locating all of the links available on the web page. Since <a> tag contains links, we are taking “a” as a tag name. It returns multiple matching elements that’s why using the findElements method, which returns a “List” of web elements.
Summary
1. By.id: locates elements by their ID attribute.
2. By.name: locates elements by their name attribute.
3. By.linkText: locates <a>(anchor) tag elements by the exact visible text of their link.
4. By.partialLinkText: locates <a> (anchor) tag elements by a partial match of their visible link text.
5. By.className: locates elements by their class name attribute.
6. By.tagName: locates elements by their HTML tag name.
By leveraging these default locators testers can identify and interact with elements in selenium. The choice of locator depends on the unique attribute and structure of the elements being targeted. It is often recommended to use the most appropriate and reliable locators for each specific scenario to ensure accurate and maintainable test automation.
Happy Learning!!!