Explore Top 12 Types of Locators in Selenium

Selenium continues to be the first choice of most developers, even today. One of the contributing factors to this is the variety of features it offers its users. One such feature is the variety of locators available to ease the automated testing process. This blog will list different types of locators in Selenium and briefly discuss them.

What is a Locator in Selenium?

Locators are commands used to inform the interface, which is the Selenium IDE, about the GUI, or Graphical User Interface element it has to operate on. GUI elements can be text boxes, links, radio buttons, checkboxes, etc. Soon after initializing the Selenium WebDriver, when the webpage to be tested is loaded, locators are used to identify the HTML elements to work on. Selenium supports several locators, which is why it is important to select the appropriate locator that is apt for your test requirements. It is important for better interaction between the Selenium WebDriver and the elements in a webpage. To expand your knowledge about more such features as locators in Selenium, you can go through this Software Testing Course.

Different Types of Locators in Selenium

Selenium offers various kinds of web element locators to its users. Broadly, these locators can be divided into two types: Structure-based and Attribute-based. The former relies on the structure of the web page to locate the elements, while the latter relies on the attribute of the element to locate it. XPath, DOM, and CSS are structure-based locators, whereas ID, Name, and Link are attribute-based locators. Here is the list of Locators in Selenium:

1. Locating by ID

Since an ID is unique for each element, it is easier to find the element using it. The ID locator is one of the most popular locators in Selenium. Format:

id=id of the element

Let us take an example: 

To find the text box where email is entered on a web page. 

Step 1: Note the ID of the textbox: “email”. 

Step 2: Launch Selenium IDE

Step 3: Enter id= “email” in the target box. 

Step 4: Click on the find button, the email text box will be highlighted on the web page. It is an indication that the Selenium IDE was able to locate it correctly. 

Though it is a fast method of locating an element, in the case of a table or a list, there are too many IDs to work with. It has led to developers using other locators to find elements.

2. Locating by Name

The name locator is similar to the ID locator, but it may or may not have a unique value. If there are elements with the same name, the first one on the web page with that name is selected by the locator. If there is no element with the given name, then a NoSuchElementException is raised. Format:

name=name of the element 

Suppose the name of a text box is “password”. 

Step 1: Open Selenium IDE and enter name=password and 

Step 2: Click on the find button. 

Step 3: The password textbook will be highlighted, indicating that it was identified correctly. 

3. Locating by Name Using Filters

Additionally, with the name locator, you can use filters to locate an element on the web page. Filters are additional attributes that you can use to differentiate between various elements with the same name. Format:

name=name of the element value=value of the filter

Let us take an example and understand how a filter attribute works. 

A web page consists of two radio buttons for the students to select whether they want to opt for a full-time course or a part-time course. Both of them have the same name, “courseType” but different filter values. Now that we have this information:

Step 1: Click on the first line in the editor. 

Step 2: Enter the command “click” in the command box. 

Step 3: In the target box, enter “name=courseType value=parttimecourse”. 

Step 4: Click on the find button, and the part-time course radio button will be highlighted.

Step 5: Press the “X” key on the keyboard to execute the click command. 

Step 6: Finally, the radio button for the part-time course will become selected.

4. Locating by ClassName

ClassName locator is used to locate elements that are defined using class attributes. The syntax is:

driver.findElement(By.className(“enter_class_name_here”));

5. Locating by LinkText

LinkTet is a type of CSS locator that applies only to hyperlink texts. Format:

link=link_text

Suppose you add a link in your HTML code similar to the following: 

<a href=”https://internshala.com/registration/student”>Register</a>

Step 1: Launch the Selenium IDE:

Step 2: In the target box, write link=Registration. 

Step 3: Click on the Find button, and you will notice that the Register button on the Internshala website is highlighted. 

Step 4: Verify further by entering the “clickAndWait” command in the command box. The Register link will be clicked on, and you will be taken to the registration page.

6. Locating by Partial LinkText

Selenium allows one to locate the web element using partial link text as well. It is a preferred method when the link is too long. Though it can help locate a unique element, it can also be used to locate multiple links on a web page with a common partial text. The syntax is:

driver.findElement(By.partialLinkText(“write_partial_link_text_here”));

7. Locating by TagName

You can also locate elements in Selenium using HTML tags. One important feature of using this locator is that it helps identify broken links on your web page. The syntax is:

driver.findElement(By.tagName(“your_tag_name_here”));

8. Locating by CSS Selector

CSS, or Cascading Style Sheets, is used to style web pages. The CSS Selector locator in Selenium is used when ID and Name locators are not preferred to locate a web element. There are different ways that you can use the CSS selector locator.

• To locate elements by tag and ID, use this syntax. 

CSS= (HTML tag) (#) (Value of the ID attribute)

• To locate elements by tag and class, use this syntax.

CSS= (HTMl tag) (.) (Value of the Class attribute)

• To locate elements by tag and attribute, use this syntax.

CSS= (HTML tag) [Attribute=Value]

• To locate elements by tag, class, and attribute, use this syntax.

CSS= (HTML tag) (.) (Class attribute value) ([attribute=Value of attribute])

9. Locating by DOM

The Document Object Model, or DOM, defines the logical structure of a document in HTML and XML. It is how the HTML elements are structured. There are four different ways in which you can locate elements in the DOM. They are as follows:

• getElementById: It will locate only one element whose ID is specified. The syntax is:

document.getElementById(“Id of the document”)

• getElementByName: It will locate all the elements with the same name. But you can access a particular element by mentioning its index number since each element here is indexed with a number starting from 0. The syntax is:

document.getElementsByName(“name”) [index]

• dom:name: The method will be applied only if the element you want to locate is contained within a named form. The syntax is:

document.forms[“name of the form”].elements[“name of the element”]

• dom:index: The method will be applied even if the element is not within a named form. Here, the index of the form is used instead. The syntax is:

document.forms[“index of the form”].elements[“index of the element”]

Note, that here the index number of the form is for the whole page and it starts from 0. An index number of the element is concerning the whole form and starts from 0 too. 

10. Locating by XPath

XPath is a language that is used to locate XML nodes, but it can be used to locate HTML elements as well. One advantage of this locator is that it can locate even those elements that do not have class, name, or ID attributes. But the rules it follows make it one of the most complicated Locators in Selenium.  

To use this locator, you have to:

Step 1: Copy the XPath from the element’s HTML code.

Step 2: Open the Selenium IDE and paste this XPath in the target box.

Step 3: Do not forget to put an extra forward slash “/” before the XPath in the box. 

Step 4: When you click Finish, the desired box will be highlighted. Alternatively, you can use the following method to locate elements through XPath:

driver.findElement(By.XPath(“//tagname[@attribute= ‘value’]”));

11. Locating Multiple Elements in Selenium

The above-mentioned locators are mostly used for locating single elements. But what if you want to locate multiple elements? Here you can use the .find_elements() method. Let us look at a sample syntax to understand it better.

all_element=driver.find_elements(By.CLASS_NAME, ‘Courses’)

When executed, this command will highlight all the elements with the class name “Courses”.

12. Relative Locators in Selenium

Relative locators are an important feature available with Selenium 4. These locators help you search for web elements concerning other elements on the web page. The following is the list of new locators:

• Above: It locates the desired web element above the specified element. The syntax is:

driver.findElement(with(By.tagName(“TagName”)).above(ElementName));

• Below: It locates the desired web element below the specified element. The syntax is:

driver.findElement(with(By.tagName(“TagName”)).below(ElementName));

• ToLeftOf: It locates the desired web element that is located to the left of the specified element. The syntax is:

driver.findElement(with(By.tagName(“TagName”)).toLeftOf(ElementName));

• ToRightOf: It locates the desired web element that is located to the right of the specified element. The syntax is:

driver.findElement(with(By.tagName(“TagName”)).toRightOf(ElementName));

• Near: It locates the desired web element that is located not more than 50 pixels from the specified element. The syntax is:

driver.findElement(with(By.tagName(“TagName”)).near(ElementName));

Conclusion

We have learned what is a locator in Selenium and that there are several other locators available. There are certain points you can keep in mind while working with these locators. Always use a unique ID, as using the same ID can lead to the wrong element being selected. Another rule to be remembered is that you should avoid locating elements that use auto-generated values or simply values that change location. This might lead to interruptions in the test if used with complex locators such as XPath. Also, keep your locators short by making sure they identify the exact element you want and not the other elements on the web page. All these rules will help you work with the locators in Selenium more efficiently.