Locate elements with CSS selectors

Use By.cssSelector with id, attributes, and substring patterns.

Concept

CSS selectors are a powerful and flexible way to locate elements in Selenium. They are often simpler and more readable than complex XPath and are supported by all modern browsers.

In Selenium, we use them through: By.cssSelector("...")

Official Best Practice

According to Selenium's official documentation, CSS Selectors are generally faster and more stable than XPath. Browsers are optimized to find elements using CSS selectors since they use the same mechanism for applying stylesheets. When both CSS and XPath could work, prefer CSS selectors.

By ID – #idValue

What it does

Uses the # symbol followed by the element’s id.
Example: #fname → element with id="fname".

Best Practice

Prefer this when you already know the id and want to stay in CSS world.

By Attribute – [attr='val']

What it does

Targets any attribute, not only id or name.
Example: input[name='lname']

Usage

Use when there is no good id or you want to be explicit about the element type.

By Substring

^= – starts with
$= – ends with
*= – contains

Example: input[placeholder^='Enter your']

Warning

Make the substring specific enough to avoid matching multiple elements by accident.

Interactive Practice

Contact Form (CSS selector demo)

Practice targeting these elements using CSS selectors!

Java Code Example

CssSelectorDemo.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
WebElement firstNameInput = driver.findElement(By.cssSelector("#fname"));
firstNameInput.clear();
firstNameInput.sendKeys("Jane");

WebElement lastNameInput = driver.findElement(By.cssSelector("input[name='lname']"));
lastNameInput.clear();
lastNameInput.sendKeys("Doe");

WebElement emailInput = driver.findElement(By.cssSelector("input[placeholder^='Enter your']"));
emailInput.sendKeys("student@example.com");

WebElement newsletterCheckbox = driver.findElement(By.cssSelector("input[value*='newsletter']"));
newsletterCheckbox.click();

driver.quit();

Code Breakdown

driver.findElement(By.cssSelector("#fname")): Uses the CSS ID selector #fname to locate the first name input (id="fname").
driver.findElement(By.cssSelector("input[name='lname']")): Uses a tag + attribute selector to find an <input> with name="lname" (the last name field).
driver.findElement(By.cssSelector("input[placeholder^='Enter your']")): Uses a starts-with substring selector (^=) on the placeholder attribute. This matches the email field with placeholder starting "Enter your...".
driver.findElement(By.cssSelector("input[value*='newsletter']")): Uses a contains substring selector (*=) on the value attribute. It finds the checkbox whose value contains "newsletter".

Pro Tip

Stay in CSS when possible

If you already use CSS in your project, By.cssSelector keeps everything consistent and is usually more concise than XPath.

Combine patterns

You can mix IDs, classes, and attributes in one selector (e.g. input#fname.required) for precise targeting.

Use substrings wisely

Substring selectors (^=, $=, *=) are powerful, but make sure the piece you match is unique enough.

Concept

CSS selectors are a powerful and flexible way to locate elements in Selenium. They are often simpler and more readable than complex XPath and are supported by all modern browsers.

In Selenium, we use them through: By.cssSelector("...")

Official Best Practice

By ID – #idValue

What it does

Uses the # symbol followed by the element’s id.
Example: #fname → element with id="fname".

Best Practice

Prefer this when you already know the id and want to stay in CSS world.

By Attribute – [attr='val']

What it does

Targets any attribute, not only id or name.
Example: input[name='lname']

Usage

Use when there is no good id or you want to be explicit about the element type.

By Substring

^= – starts with
$= – ends with
*= – contains

Example: input[placeholder^='Enter your']

Warning

Make the substring specific enough to avoid matching multiple elements by accident.

Java Code Example

CssSelectorDemo.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
WebElement firstNameInput = driver.findElement(By.cssSelector("#fname"));
firstNameInput.clear();
firstNameInput.sendKeys("Jane");

WebElement lastNameInput = driver.findElement(By.cssSelector("input[name='lname']"));
lastNameInput.clear();
lastNameInput.sendKeys("Doe");

WebElement emailInput = driver.findElement(By.cssSelector("input[placeholder^='Enter your']"));
emailInput.sendKeys("student@example.com");

WebElement newsletterCheckbox = driver.findElement(By.cssSelector("input[value*='newsletter']"));
newsletterCheckbox.click();

driver.quit();

Code Breakdown

driver.findElement(By.cssSelector("#fname")): Uses the CSS ID selector #fname to locate the first name input (id="fname").
driver.findElement(By.cssSelector("input[name='lname']")): Uses a tag + attribute selector to find an <input> with name="lname" (the last name field).
driver.findElement(By.cssSelector("input[placeholder^='Enter your']")): Uses a starts-with substring selector (^=) on the placeholder attribute. This matches the email field with placeholder starting "Enter your...".
driver.findElement(By.cssSelector("input[value*='newsletter']")): Uses a contains substring selector (*=) on the value attribute. It finds the checkbox whose value contains "newsletter".

Pro Tip

Stay in CSS when possible

If you already use CSS in your project, By.cssSelector keeps everything consistent and is usually more concise than XPath.

Combine patterns

You can mix IDs, classes, and attributes in one selector (e.g. input#fname.required) for precise targeting.

Use substrings wisely

Substring selectors (^=, $=, *=) are powerful, but make sure the piece you match is unique enough.