Selenium Simplified — Mastering Selenium Locators (ID, CSS, XPath)

Introduction

In the previous article, we learned how Selenium communicates with the browser using WebDriver and browser drivers.

But before Selenium can click, type, or submit anything, it must answer one important question:

“Which element on the page should I interact with?”

This is where locators come in.

Locators help Selenium identify and interact with specific elements on a webpage.

For example:

• Clicking a login button
• Typing into a username field
• Reading text from a label

Without locators, Selenium would not know which element to target.

What Are Locators in Selenium?

A locator is a way to identify a specific element on a webpage.

In Selenium, we use locators with the findElement() method.

Example:

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

Here:

• findElement() searches for an element
• By.id() tells Selenium how to locate it

Once the element is found, we can interact with it.

Example:

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

Common Types of Selenium Locators

Selenium provides several locator strategies.

The most commonly used ones are:

• ID
• Name
• Class Name
• CSS Selector
• XPath

Let’s understand each one.

1. ID Locator

The ID locator is usually the fastest and most reliable.

If an element has a unique ID, it should be your first choice.

Example HTML:

<input id="username" type="text">

Selenium code:

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

Why it’s good:

• IDs are usually unique
• Easy to read
• Very fast

Best practice:

Always prefer ID when available.

2. Name Locator

The name locator is commonly used in forms.

Example HTML:

<input name="email" type="text">

Selenium code:

driver.findElement(By.name("email"));

However, unlike IDs, name attributes are not always unique.

So use this only when you're confident the element is unique.

3. Class Name Locator

Sometimes elements are identified using class names.

Example HTML:

<button class="login-button">Login</button>

Selenium code:

driver.findElement(By.className("login-button"));

One limitation:

Multiple elements can share the same class name, so Selenium might select the wrong element.

4. CSS Selector

CSS selectors are very powerful and flexible.

Example HTML:

<button class="login-button">Login</button>

Selenium code:

driver.findElement(By.cssSelector(".login-button"));

CSS selectors can also target elements using combinations like:

• class
• id
• attributes
• element hierarchy

Example:

driver.findElement(By.cssSelector("form.login-form button"));

Many automation engineers prefer CSS selectors because they are:

• Fast
• Flexible
• Readable

5. XPath

XPath is another powerful locator strategy.

Example:

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

XPath allows navigation through the entire HTML structure.

This makes it useful when elements:

• don't have IDs
• have dynamic attributes
• require complex navigation

However, XPath can sometimes become long and hard to maintain.

Example of a bad XPath:

/html/body/div[2]/div/form/input

This is called absolute XPath, and it should generally be avoided.

CSS vs XPath

A common question in Selenium automation is:

Should I use CSS or XPath?

Here’s a simple comparison:

In many test frameworks, CSS selectors are preferred, but XPath is extremely useful when dealing with complex page structures.

Best Locator Strategy

A common guideline followed by automation engineers is:

1️⃣ ID
2️⃣ Name
3️⃣ CSS Selector
4️⃣ XPath

This order helps keep tests:

• stable
• readable
• maintainable

Common Beginner Mistakes

When starting with Selenium, many people make these mistakes:

Using very long XPath expressions

Example:

/html/body/div/div/div/form/input

These break easily when the UI changes.

Using dynamic IDs

Some frameworks generate IDs dynamically, which means they change every time the page loads.

Relying too much on class names

Classes are often reused across multiple elements.

Final Thoughts

Locators are the foundation of Selenium automation.

Every interaction in Selenium starts with finding an element first.

Choosing the right locator makes your tests:

• faster
• more stable
• easier to maintain

Mastering locators will make the rest of Selenium much easier to learn.

Up Next in This Series

Now that we know how Selenium finds elements, the next challenge is handling slow or dynamically loading pages.

In the next article, we’ll explore:

Selenium Waits — Implicit Wait vs Explicit Wait

Understanding waits is essential for building reliable automation tests.