CSS attribute and pseudo-class selectors in Selenium Java - Build an Automation Script

Verify search input field and first result highlight using CSS attribute and pseudo-class selectors

Preconditions (1)

Step 1: Locate the search input field using a CSS attribute selector for input elements with name='search'

Step 2: Enter the text 'Selenium' into the search input field

Step 3: Locate the search button using a CSS attribute selector for button elements with type='submit' and click it

Step 4: Wait for the search results to load

Step 5: Locate the first search result item using a CSS pseudo-class selector :first-child on the results list

Step 6: Verify that the first search result item is highlighted with the CSS class 'highlight'

✅ Expected Result: The search input accepts the text 'Selenium', the search button is clicked, the first search result is displayed and highlighted with the 'highlight' class

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Verify the search input field is found using CSS attribute selector

Verify the first search result item is highlighted with 'highlight' class

Best Practices:

Use explicit waits to wait for elements to be visible or clickable

Use CSS selectors consistently for locating elements

Use Page Object Model pattern for element locators and actions

Avoid hardcoded Thread.sleep; use WebDriverWait instead

Automated Solution

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.*;
import java.time.Duration;

public class SearchTest {
    private WebDriver driver;
    private WebDriverWait wait;

    @BeforeEach
    public void setUp() {
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
        driver.get("http://example.com");
    }

    @Test
    public void testSearchInputAndFirstResultHighlight() {
        // Locate search input using CSS attribute selector
        WebElement searchInput = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("input[name='search']")));
        assertNotNull(searchInput, "Search input field should be present");

        // Enter text 'Selenium'
        searchInput.sendKeys("Selenium");

        // Locate search button using CSS attribute selector and click
        WebElement searchButton = wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("button[type='submit']")));
        searchButton.click();

        // Wait for search results container to be visible
        WebElement resultsList = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("ul#results")));

        // Locate first search result using :first-child pseudo-class
        WebElement firstResult = resultsList.findElement(By.cssSelector("li:first-child"));
        assertNotNull(firstResult, "First search result should be present");

        // Verify first result has 'highlight' class
        String classes = firstResult.getAttribute("class");
        assertTrue(classes != null && classes.contains("highlight"), "First result should have 'highlight' class");
    }

    @AfterEach
    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
}

This test uses Selenium WebDriver with Java to automate the manual test case.

In setUp(), we open the browser and navigate to the homepage.

We locate the search input using a CSS attribute selector input[name='search'] and verify it is present.

We enter the text 'Selenium' into the input.

We locate the search button using button[type='submit'] and click it.

We wait explicitly for the search results list with id 'results' to appear.

We then find the first result using the CSS pseudo-class selector li:first-child inside the results list.

Finally, we check that the first result has the CSS class 'highlight' to confirm it is highlighted.

Explicit waits ensure elements are ready before interacting, avoiding flaky tests.

Assertions confirm the elements are found and the highlight class is present, matching the expected result.

In tearDown(), we close the browser to clean up.

Common Mistakes - 4 Pitfalls

Using Thread.sleep() instead of explicit waits

{'mistake': 'Using XPath instead of CSS selectors when the test requires CSS attribute and pseudo-class selectors', 'why_bad': 'The test specifically requires CSS selectors to practice attribute and pseudo-class selectors, using XPath misses the learning goal.', 'correct_approach': "Use By.cssSelector with attribute selectors like [name='search'] and pseudo-classes like :first-child."}

Not verifying the presence of elements before interacting

Hardcoding element locators without using meaningful selectors

Bonus Challenge

Now add data-driven testing with 3 different search inputs: 'Selenium', 'Java', and 'Testing'

Show Hint

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