CSS attribute and pseudo-class selectors in Selenium Java

Introduction

CSS attribute and pseudo-class selectors help find web elements by their attributes or special states. This makes tests more precise and reliable.

When you want to select an element with a specific attribute value, like input with type='email'.

When you need to find elements that are checked, hovered, or focused.

When elements don't have unique IDs or classes but have attributes you can use.

When you want to select the first or last item in a list.

When you want to test dynamic states like :hover or :disabled.

Syntax

Selenium Java

driver.findElement(By.cssSelector("tagName[attribute='value']"));
driver.findElement(By.cssSelector(":pseudo-class"));

Use square brackets [] to match attributes.

Pseudo-classes start with a colon (:), like :first-child or :checked.

Examples

Selects an input element where the type attribute equals 'checkbox'.

Selenium Java

driver.findElement(By.cssSelector("input[type='checkbox']"));

Selects a button element that is disabled.

Selenium Java

driver.findElement(By.cssSelector("button:disabled"));

Selects the first list item in a list.

Selenium Java

driver.findElement(By.cssSelector("li:first-child"));

Selects a link where the href attribute contains the word 'login'.

Selenium Java

driver.findElement(By.cssSelector("a[href*='login']"));

Sample Program

This test opens a webpage and finds elements using CSS attribute and pseudo-class selectors. It prints confirmation and details for each found element.

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class CssSelectorTest {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("https://example.com/form");

            // Select checkbox input by attribute
            WebElement checkbox = driver.findElement(By.cssSelector("input[type='checkbox']"));
            System.out.println("Checkbox found: " + checkbox.isDisplayed());

            // Select disabled button by pseudo-class
            WebElement disabledButton = driver.findElement(By.cssSelector("button:disabled"));
            System.out.println("Disabled button found: " + disabledButton.isDisplayed());

            // Select first list item
            WebElement firstItem = driver.findElement(By.cssSelector("ul li:first-child"));
            System.out.println("First list item text: " + firstItem.getText());

            // Select link containing 'login' in href
            WebElement loginLink = driver.findElement(By.cssSelector("a[href*='login']"));
            System.out.println("Login link href: " + loginLink.getAttribute("href"));

        } finally {
            driver.quit();
        }
    }
}

Important Notes

Always prefer unique attributes for selectors to avoid flaky tests.

Pseudo-classes like :hover cannot be triggered by Selenium directly; use Actions class for that.

Use *= in attribute selectors to find partial matches inside attribute values.

Summary

CSS attribute selectors match elements by attribute values.

Pseudo-class selectors match elements in special states or positions.

Using these selectors in Selenium helps find elements precisely and write stable tests.

Practice

1. Which CSS selector correctly selects all <input> elements with a type attribute equal to "text"?

easy

A. input[type^='text']

B. input[type*='text']

C. input[type$='text']

D. input[type='text']

Solution

1. Step 1: Understand attribute selectors

   The selector input[type='text'] matches input elements whose type attribute exactly equals text.

2. Step 2: Differentiate other selectors

   ^= means starts with, $= means ends with, and *= means contains. These do not require exact match.

3. Final Answer:

   input[type='text'] -> Option D

4. Quick Check:

   Exact attribute match = input[type='text'] [OK]

Hint: Use '=' for exact attribute match in CSS selectors [OK]

Common Mistakes:

• Confusing ^= (starts with) with = (exact match)
• Using $= or *= when exact match is needed
• Forgetting to quote attribute values

2. Which of the following is the correct CSS selector syntax to select all <a> elements with an href attribute containing the word "login"?

easy

A. a[href*='login']

B. a[href^='login']

C. a[href$='login']

D. a[href='login']

Solution

1. Step 1: Understand the *= attribute selector

   The selector a[href*='login'] matches a elements whose href attribute contains the substring login anywhere.

2. Step 2: Differentiate other selectors

   ^= matches start, $= matches end, and = matches exact. We want contains, so *= is correct.

3. Final Answer:

   a[href*='login'] -> Option A

4. Quick Check:

   Contains substring = *= [OK]

Hint: Use '*=' to select attributes containing a substring [OK]

Common Mistakes:

• Using ^= or $= instead of *= for substring match
• Forgetting quotes around attribute values
• Using = which requires exact match

3. Given the following HTML snippet:

<ul>
  <li>Item 1</li>
  <li class="active">Item 2</li>
  <li>Item 3</li>
  <li class="active">Item 4</li>
</ul>

What will the CSS selector li.active:first-of-type select?

medium

A. All li elements with class active

B. The first li element with class active

C. No elements, because first-of-type ignores class

D. The first li element in the list regardless of class

Solution

1. Step 1: Understand :first-of-type pseudo-class

   :first-of-type selects the first sibling of its type (here, the first li) regardless of class.

2. Step 2: Combine with class selector

   The selector li.active:first-of-type looks for an li that is both .active and the first li. The first li has no class, so no match.

3. Final Answer:

   No elements, because first-of-type ignores class -> Option C

4. Quick Check:

   first-of-type ignores class, so no match [OK]

Hint: :first-of-type matches first element type ignoring classes [OK]

Common Mistakes:

• Assuming :first-of-type matches first element with class
• Confusing :first-child with :first-of-type
• Ignoring that class must match too

4. You want to select all <button> elements that are disabled using a CSS selector in Selenium. Which selector is incorrect and will cause your test to fail?

medium

A. button:enable

B. button[disabled]

C. button[disabled='disabled']

D. button:disabled

Solution

1. Step 1: Identify valid selectors for disabled buttons

   button:disabled and button[disabled] correctly select disabled buttons. button[disabled='disabled'] also works if attribute equals 'disabled'.

2. Step 2: Spot invalid pseudo-class

   :enable is not a valid CSS pseudo-class. The correct one is :enabled.

3. Final Answer:

   button:enable -> Option A

4. Quick Check:

   Invalid pseudo-class = :enable [OK]

Hint: Use :disabled or [disabled], not :enable [OK]

Common Mistakes:

• Using :enable instead of :enabled
• Assuming [disabled='true'] works (it must match exact value)
• Confusing attribute selector syntax

5. You have a list of <input> elements with various name attributes:

<input name="user_email">
<input name="user_password">
<input name="admin_email">
<input name="admin_password">

Which CSS selector will select only the input elements whose name attribute ends with "_email"?

hard

A. input[name*='_email']

B. input[name$='_email']

C. input[name^='_email']

D. input[name='_email']

Solution

1. Step 1: Understand $= attribute selector

   The selector input[name$='_email'] matches input elements whose name attribute ends exactly with _email.

2. Step 2: Differentiate other selectors

   *= matches contains anywhere, ^= matches starts with, and = matches exact. We want ends with, so $= is correct.

3. Final Answer:

   input[name$='_email'] -> Option B

4. Quick Check:

   Ends with substring = $= [OK]

Hint: Use $= to select attributes ending with a substring [OK]

Common Mistakes:

• Using *= or ^= instead of $= for ends with
• Forgetting quotes around attribute values
• Using = which requires exact match