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