Selenium Locators Tutorial for Beginners

XPath vs CSS Selector Explained

Locators are one of the most important concepts in Selenium WebDriver. Without locators, Selenium cannot interact with web elements such as buttons, input fields, links, or dropdowns. In this tutorial, you will learn all Selenium locators with examples and also understand the difference between XPath and CSS Selector.

What are Selenium Locators?

Selenium Locators are methods used to find and interact with web elements in a web page DOM (Document Object Model).

Example:

driver.findElement(By.id("username")).sendKeys("admin");

Here, By.id("username") is the locator.

Why Are Locators Important?

Locators are essential because Selenium must first identify an element before performing any action.

They help to:

• Click buttons
• Enter text
• Select dropdowns
• Validate elements
• Extract text from web pages

If locators are incorrect, tests will fail.

Types of Selenium Locators

Selenium provides 8 types of locators.

1. ID Locator

The most reliable and fastest locator.

Example:

driver.findElement(By.id("email")).sendKeys("test@example.com");

When to use:

• When ID is unique
• Preferred locator type

2. Name Locator

Used when elements have the name attribute.

Example:

driver.findElement(By.name("password")).sendKeys("123456");

3. Class Name Locator

Used for locating elements by CSS class.

Example:

driver.findElement(By.className("login-btn")).click();

4. Tag Name Locator

Used to find elements by HTML tag.

Example:

List<WebElement> links = driver.findElements(By.tagName("a"));

5. Link Text Locator

Used for anchor tags.

Example:

driver.findElement(By.linkText("Forgot Password")).click();

6. Partial Link Text Locator

Used when full link text is dynamic.

Example:

driver.findElement(By.partialLinkText("Forgot")).click();

7. CSS Selector Locator

One of the most powerful and widely used locators.

Example:

driver.findElement(By.cssSelector("#email")).sendKeys("admin");

8. XPath Locator

Most flexible locator in Selenium.

Example:

driver.findElement(By.xpath("//input[@id='email']")).sendKeys("admin");

XPath vs CSS Selector in Selenium

XPath and CSS Selectors are the two most commonly used advanced locators.

Understanding their differences is critical for writing stable automation scripts.

What is XPath?

XPath is a query language used to navigate XML/HTML documents.

It allows you to traverse the DOM structure in any direction.

Example:

driver.findElement(By.xpath("//input[@id='username']"));

What is CSS Selector?

CSS Selectors are patterns used to select elements based on CSS rules.

They are faster and simpler in many cases.

Example:

driver.findElement(By.cssSelector("input#username"));

XPath vs CSS Selector Comparison

When to Use XPath

Use XPath when:

• You need to navigate parent/child relationships
• Element has no unique attributes
• You need to use text()
• DOM structure is complex

Example:

driver.findElement(By.xpath("//label[text()='Username']/following::input"));

When to Use CSS Selector

Use CSS Selector when:

• Element has ID or class
• You want faster execution
• DOM traversal is simple
• You prefer readable syntax

Example:

driver.findElement(By.cssSelector("input.form-control"));

Types of XPath in Selenium

1. Absolute XPath

Starts from root node.

/html/body/div/form/input

❌ Not recommended (fragile)

2. Relative XPath

Starts from current node.

//input[@id='username']

✔ Recommended

XPath Functions

contains()

driver.findElement(By.xpath("//input[contains(@id,'user')]"));

starts-with()

driver.findElement(By.xpath("//input[starts-with(@id,'user')]"));

text()

driver.findElement(By.xpath("//button[text()='Login']"));

CSS Selector Syntax Examples

ID Selector

#username

Class Selector

.login-button

Attribute Selector

input[type='text']

Nested Elements

div.container input#email

Common Locator Mistakes

1. Using Dynamic XPath incorrectly

Avoid:

//div[@id='12345']

2. Overusing Absolute XPath

Avoid long fragile paths.

3. Ignoring unique attributes

Prefer ID over XPath when possible.

4. Not using waits

Element may not be loaded yet.

Best Practices for Selenium Locators

• Prefer ID over all locators
• Use CSS selectors when possible
• Use XPath only when necessary
• Avoid absolute XPath
• Keep locators simple and readable
• Avoid brittle locators tied to layout
• Use explicit waits with locators

Real-World Example

Login page automation:

driver.findElement(By.id("username")).sendKeys("admin");
driver.findElement(By.cssSelector("#password")).sendKeys("1234");
driver.findElement(By.xpath("//button[text()='Login']")).click();

Frequently Asked Questions

What is the best locator in Selenium?

ID locator is the fastest and most reliable.

Is XPath better than CSS Selector?

XPath is more powerful, but CSS Selector is faster and simpler.

Can CSS Selector find text?

No, CSS cannot locate elements by text.

Why do Selenium tests fail due to locators?

Because of:

• Dynamic elements
• Poor locator strategy
• DOM changes

Which locator should beginners use?

Start with:

• ID
• Name
• CSS Selector

Then learn XPath.

Conclusion

Selenium locators are the foundation of automation testing. A strong understanding of different locator strategies such as ID, CSS Selector, and XPath is essential for building stable automation frameworks.

While CSS selectors are faster and simpler, XPath provides greater flexibility for complex DOM structures. Choosing the right locator strategy improves test stability and reduces maintenance effort.

In the next article, we will explore how to handle waits in Selenium to manage dynamic web elements effectively.

Related Articles

✓ What is Selenium?
✓ Selenium Architecture Explained
✓ Selenium Components Explained
✓ Selenium WebDriver Setup
✓ Complete Selenium Tutorial