In the previous section, we set up the environment along with the necessary components to practice writing automation code. In this lesson, I will take the time to explore a very important part of automated testing – which is how to identify locators for elements on a website. 

1. So, what are locators? 

A locator is a piece of code, or an expression used to identify and locate a specific element on a website or application, serving the purpose of automated testing such as interaction, verification, or data extraction from that element. 

How to identify locators on a website 

Step 1: On the website, right-click and select Inspect or press the F12 key on the keyboard

Step 2: Click on the icon shown (or use the shortcut Ctrl + Shift + C) 

Step 3: Move the mouse cursor to the element you want to identify the locator for, then left-click to select it.

The locator will be highlighted in the Elements tab of the Inspect tool.

2. Commonly used locators

2.1 ID

Using locators by ID is the simplest and most convenient method. Each element on a website usually has a unique ID. However, not all developers assign IDs to every element because it takes time and is often unnecessary for most elements on the page.

Above is an example of a locator using ID. You can see the element has id=”field-email”. To locate this element, we use the following locator syntax

WebElement IdMail = driver.findElement(By.id(" field-email "));

2.2 Name

Similar to ID, the Name attribute is also used as a locator. However, Name is not mandatory, so we cannot always rely on it to identify elements.

As seen in the example above, we identify the Name as “email.” We can declare the locator using the following syntax:

WebElement NameMail = driver.findElement(By.name(" field-email "));

2.3 Classname

Classname is an attribute of an HTML element used to assign one or more CSS classes or for JavaScript to identify and interact with that element. For example:

As in the example above, with the classname = “o_data_row,” we can use the following syntax to identify the locator by classname:

WebElement clsName = driver.findElement(By.className(" o_data_row "));

However, this method is rarely used because classnames are often shared by multiple elements, so it does not guarantee uniqueness when used as a locator.

2.4 Linktext

Link text usually appears in HTML <a> tags as a hyperlink. Identifying link text is quite straightforward. Below is an example of link text and how to declare the corresponding locator:

Syntax:

WebElement link=driver.findElement(By.linktext("Trang chủ")); 

WebElement link=driver.findElement(By.linktext("Giới thiệu")); 

2.5 PartialLinkText

Unlike LinkText, which requires an exact match of the entire displayed text, PartialLinkText only needs to match a part of that text.

WebElement link=driver.findElement(By.linktext("Trang")); 

WebElement link=driver.findElement(By.linktext("Giới")); 

With PartialLinkText, when multiple tags contain similar text, the automation tool will by default select the first element it finds.

2.6 CSS selector

CSS Selector is one of the most popular and effective methods for locating elements in Selenium, favored for its concise syntax, readability, and fast execution speed on most modern browsers. CSS Selector allows flexible identification of elements through ID, class, attributes, order position, and parent-child relationships, making test cases clearer and easier to maintain. 

Additionally, CSS Selectors can be tested directly in the browser using DevTools, saving debugging time. However, CSS Selectors also have some limitations, such as being unable to traverse up to parent elements (no support for accessing parent or ancestor), cannot filter by text content, and cannot handle complex logical conditions like AND, OR, or negation. Therefore, testers need to be aware of these constraints when choosing the most suitable locator method for each case. 

Common types of CSS Selectors include: 

• ID 
• Class 
• Tag 
• Tag + Class 
• Multiple Classes 
• Attribute 
• Attribute + Specific Value 
• Parent > Child relationship 
• Sibling (adjacent elements) 
• Position (nth-child, nth-of-type, etc.) 

Below is an example of an HTML snippet: 

We can declare it using the following syntax: 

// 1. ID Selector 
     WebElement inputById = driver.findElement(By.cssSelector("#username")); 
 
// 2. Class Selector 
     WebElement inputByClass = driver.findElement(By.cssSelector(".input-password")); 
 
// 3. Tag Selector 
     WebElement firstInput = driver.findElement(By.cssSelector("input")); 
 
// 4. Tag + Class 
      WebElement inputTagClass = driver.findElement(By.cssSelector("input.input-password")); 
 
// 5. Multiple class 
      WebElement buttonMultiClass = driver.findElement(By.cssSelector(".btn.submit-btn")); 
 
// 6. Attribute Selector 
      WebElement inputByAttr = driver.findElement(By.cssSelector("input[name='password']")); 
 
 // 7. Attribute (partial match) 
      WebElement inputContains = driver.findElement(By.cssSelector("input[placeholder*='đăng']")); 
 
 // 8. Selecting the direct child element 
      WebElement buttonDirectChild = driver.findElement(By.cssSelector(".login-form > button")); 
 
// 9. Sibling selector  
        WebElement secondInput = driver.findElement(By.cssSelector("input + input")); 
 
// 10. nth-child selector 
        WebElement nthChildInput = driver.findElement(By.cssSelector(".login-form input:nth-child(2)")); 

2.7 Xpath

XPath is considered the most precise and flexible method for locating elements, capable of accurately identifying almost all types of elements. However, XPath expressions tend to be long and difficult to write, especially with complex or absolute XPath. 

In some cases, XPath can also execute slower compared to CSS Selectors. 

Below is an example of XPath:

Syntax:

// --- Relative XPath --- 
// 1. Input Username (by id) 
       WebElement inputUsernameRel = driver.findElement(By.xpath("//input[@id='username']")); 
 
// 2. Input password 
        WebElement inputPasswordRel = driver.findElement(By.xpath("//input[@class='input-password' and @type='password']")); 
 
// 3. Button Login 
        WebElement btnLoginRel = driver.findElement(By.xpath("//button[text()='Đăng nhập']")); 
 
// 4. Button login (by class has 'submit-btn') 
        WebElement btnLoginClassRel = driver.findElement(By.xpath("//button[contains(@class, 'submit-btn')]")); 
 
// 5. Input pass (It is the second child of the div with class "login-form") 
        WebElement inputPasswordPosRel = driver.findElement(By.xpath("//div[@class='login-form']/input[2]")); 
 
// --- Absolute XPath --- 
// Assuming the DOM structure is as follows, the absolute XPath could be: 
// /html/body/div[@class='login-form']/input[1] 
        WebElement inputUsernameAbs = driver.findElement(By.xpath("/html/body/div[@class='login-form']/input[1]")); 
 
// /html/body/div[@class='login-form']/input[2] 
        WebElement inputPasswordAbs = driver.findElement(By.xpath("/html/body/div[@class='login-form']/input[2]")); 
 
// /html/body/div[@class='login-form']/button 
        WebElement btnLoginAbs = driver.findElement(By.xpath("/html/body/div[@class='login-form']/button")); 

How to determine XPath in the browser: 

Step 1: Open Chrome Developer Tools 

• Press F12 or right-click on the page → select Inspect. 

Step 2: Select the element to get the XPath 

• In DevTools, click the arrow icon at the top left (Select Element). 
• Click on the element on the webpage you want to get the XPath for. 

Step 3: Copy the XPath 

• In the Elements panel, the selected element will be highlighted. 
• Right-click on that element → choose Copy → Copy XPath. 
  You can copy either the relative XPath or the full XPath (absolute path). 

Step 4: Paste the XPath into your code 

• Simply paste the copied XPath into your Selenium script. 

Conclusion

Above, we have learned about locators and elements in Selenium—important tools that help accurately locate and interact with web elements. Choosing the right locator contributes to improving the efficiency and stability of automated test scripts. Hopefully, this knowledge will support everyone in developing more professional test scripts. Stay in this space, the zen8labs blog has a range of topics for you to learn from, hence you need to be here. Especially when in the next lesson, we will explore how to use the basic functions of WebElement in Selenium.

Viet-Anh Nguyen, Quality Assurnce Engineer