Selenium uses locators to find and match the elements on the web page. Locator is a command that tells Selenium which GUI elements ( say Text Box, Buttons, Check Boxes, etc.) it needs to operate on.
In Selenium, with the help of locators, we can click on buttons, enter text in text boxes, and perform other operations on elements.
Locators are building blocks of the web page. Identifying correct GUI elements is a prior condition to creating an automation script. As per Selenium's official website, there are eight traditional locators.
Here is the list of Selenium Traditional Locators:
1. ID
Locates elements whose ID attribute matches the search value. IDs should be unique to all elements and are considered the quickest and safest way to find elements.
HTML
<input type="password" id="edit-pass" name="pass" class="form-text required">
In the above example, the id of an element is the edit-pass.
Selenium Java Code
driver.findElement(By.id("edit-pass")).sendKeys("Hello");
2. Name
Locates elements whose name attribute matches the search value. The name may or may not be unique on a page. If elements have identical names, the locator selects the first element with that name on the page.
HTML
<input type="password" id="edit-pass" name="pass" class="form-text required">
In the above example Name of an element is pass.
Selenium Java Code
driver.findElement(By.name("pass")).sendKeys("Hello");
3. Link Text
Elements can be located through link text present in hyperlinks. The first link will be selected if there is more than one link of the same text. Link texts is associated with the anchor tag, and this locator can only be used for the anchor tag.
HTML
<a href="/user/register" data-drupal-link-system-path="user/register">Create new account</a>
In the above example, the link text is Create new account
Selenium Java Code
driver.findElement(By.linkText("CREATE NEW ACCOUNT")).click();
4. Partial Link Text
Locating elements via Partial Link Text works similar to a regular Link Text locator. The motivation for using the Partial Link Text locator in Selenium WebDriver over the standard Link Text Locator is that when you have a long link text, you want to use only partial text to perform further actions on it. Sometimes, this technique can also be used to locate multiple links on a page with a common partial text.
HTML
<a href="/user/register" data-drupal-link-system-path="user/register">Create new account</a>
We can click on the above element using partial link text CREATE NEW.
Selenium Java
driver.findElement(By.partialLinkText("CREATE NEW")).click();
5. Tag Name
As the name specifies, this CSS locator in Selenium WebDriver identifies elements with Tag names like span tag, div tag, input tag or a tag, etc. A common use case is locating all links on your page and verifying whether they are broken or functional.
Selenium Java
driver.findElement(By.tagName("input")).sendKeys("hello world");
This will enter hello world value in first input element of the page.
6. Class Name
Class Name locator helps locate elements defined through the class attribute.
HTML
<input id="edit-mail" name="mail" class="form-email required">
You can select an element using the class name form-email or required. Classes are separated by space.
Selenium Java Code
driver.findElement(By.className("form-email")).sendKeys("hello@example.com");
7. CSS Selector
Locates elements matching a CSS selector. The CSS selector is always the best way to locate complex elements on the page. We use # for id and dot(.) for class in CSS.
HTML
<input type="text" id="edit-name" name="name" class="form-text required" required="required">
One of the css selector of above element will be #edit-name
Selenium Java Code
driver.findElement(By.cssSelector("#edit-name")).sendKeys("myusername");
8. XPath
If one has failed to identify an element by ID, class, Name or CSS, one would need to locate the element through its XML path. This process is same as reading an XML document.
HTML
<input type="text" id="edit-name" name="name" class="form-text required" required="required">
One of the css xpath of above element will be //input[@id='edit-name']
Selenium Java Code
driver.findElement(By.xpath("//input[@id='edit-name']")).sendKeys("myusername");
That's all about Traditional Locators, Selenium has introduced Relative Locator in version 4 which we will discuss in next article.
