As quality engineers, you are aware that in order to test a web application, you must take precise activities on the HTML elements (such as click, type, etc.). Now, when you automate those apps, the automation tool should also be able to operate on HTML components in the same ways that a person can. The challenge that now arises is how these automation tools determine which HTML element they need to conduct a specific function on. “Locators in Selenium” is the answer.
Nearly all UI automation solutions include the ability to use locators for the identification of HTML elements on a web page, which is how to recognize an HTML element on a web page. Following a similar pattern, Selenium has the ability to use “Locators” (commonly referred to as “Selenium Locators”) to identify HTML elements. Selenium is compatible with a wide range of locators. The fundamental idea of Selenium Locators will be explained in a decent online Selenium certification course.
What are Locators in Selenium?
Choosing the appropriate GUI element on a web page is a must for writing any effective automation script, as stated above. Locators become useful in this situation. One of the crucial Selenium infrastructure components, locators assist Selenium scripts in specifically identifying the WebElements (such as text boxes, buttons, etc.) present on the web page. So, how can we obtain these locators’ values? And how can the automation framework use the same? Before attempting to acquire a web element’s locator, let’s first grasp how to identify a single web element in the DOM across the entire page.
How to locate a web element in DOM?
You must locate the HTML element in the DOM (Document Object Model), for which we must obtain the locator, as is common knowledge. To locate the web element in a web browser’s DOM, you can follow these steps:
- In Google Chrome, the DOM can be accessed by pressing F12 or by right-clicking the web page and choosing Inspect.
- The Developer Tools console will open once we select the “Inspect option,” as displayed below. The “Elements” tab, which depicts the whole DOM structure of the web page, will open by default. Now, the mouse pointer will highlight the HTML tags in the DOM if we move it over them.
- The key concern right now is how to locate the web element in the DOM. Select the web element on the web page by clicking the “Mouse Icon” arrow (marked by Marke 1 in the screenshot below). It will instantly make the corresponding HTML element in the DOM stand out. Let’s say we want to locate the HTML elements that match the banner image, the correct HTML element will be automatically highlighted when we choose the mouse point and click on the banner image.
This makes it simple to look for the HTML element in the DOM that corresponds to a web element on a webpage. Let’s try to understand how we can obtain a location for these web items so that Selenium may utilize it to identify them specifically.
Which locators does Selenium support?
There are different kinds of locators that we can use to specifically identify a web element on the webpage. A clear representation of the various sorts of locators Selenium supports is shown in the accompanying graphic.
Selenium offers the “By” class, which aids in identifying elements within the DOM, so that you may access all of these locators. It provides a variety of methods (some of which are shown in the figure below) that can be used to identify web elements based on their associated locator strategies, including className, cssSelector, id, linkText, name, partialLinkText, taName, and xpath.
By looking through all the visible methods in the “By” class, you can easily find all the locators that Selenium supports.
There are several locators that Selenium supports.
Class name: A class attribute is used by the ClassName operator to identify an object.
CSS selector: CSS may be used to identify any web element and is used to establish style rules for web pages.
Id: The ‘id’ attribute can be used to identify components similarly to class.
element name can also be found using linkText, which is the text used in hyperlinks. partialLinkText: An element partial can also be found using the name attribute.
LinkText: A portion of the link’s text can be used to identify an element tag.
Name: Another way to find items is to use a tag.
xpath: The language used to search an XML document is called xpath. The web element on any page can be uniquely identified by the same.
Conclusion
The eight locator types supported by Selenium are id, name, className, tagName, linkText, partialLinkText, CSS selector, and xpath. Additionally, utilizing id is one of the quickest and most accurate ways to recognize elements. The id is often always distinct on a certain web page. Check out the online Selenium training program to learn more.
