CSS attribute and pseudo-class selectors in Selenium Java - Test Execution Trace

Test Overview

This test opens a webpage and uses CSS attribute and pseudo-class selectors to find elements. It verifies that the correct elements are found and interactable.

Test Code - Selenium

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 CssSelectorTest {
    WebDriver driver;
    WebDriverWait wait;

    @BeforeEach
    public void setUp() {
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    }

    @Test
    public void testCssAttributeAndPseudoClassSelectors() {
        driver.get("https://example.com/testpage");

        // Find input with attribute type='text'
        WebElement inputText = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("input[type='text']")));
        assertNotNull(inputText);

        // Find link with href containing 'contact'
        WebElement contactLink = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("a[href*='contact']")));
        assertTrue(contactLink.isDisplayed());

        // Find first list item using :first-child pseudo-class
        WebElement firstListItem = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("ul#menu li:first-child")));
        assertEquals("Home", firstListItem.getText());

        // Click the contact link
        contactLink.click();

        // Verify URL changed to contact page
        wait.until(ExpectedConditions.urlContains("contact"));
        assertTrue(driver.getCurrentUrl().contains("contact"));
    }

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

Execution Trace - 8 Steps

Step	Action	System State	Assertion	Result
1	Test starts and Chrome browser opens	Chrome browser window is open and ready	-	PASS
2	Navigate to https://example.com/testpage	Browser displays the test page with inputs, links, and menu	-	PASS
3	Find input element with attribute type='text' using CSS selector input[type='text']	Input element is present in the DOM	Assert inputText is not null	PASS
4	Find link element with href containing 'contact' using CSS selector a[href*='contact']	Contact link is present and visible	Assert contactLink is displayed	PASS
5	Find first list item in menu using CSS selector ul#menu li:first-child	First list item is present with text 'Home'	Assert firstListItem text equals 'Home'	PASS
6	Click the contact link	Browser navigates to contact page	-	PASS
7	Wait until URL contains 'contact'	URL is updated to contact page URL	Assert current URL contains 'contact'	PASS
8	Test ends and browser closes	Browser window is closed	-	PASS

Failure Scenario

Failing Condition: The CSS selector does not find the element because the attribute or pseudo-class is incorrect or element is missing

Execution Trace Quiz - 3 Questions

Which CSS selector is used to find an input element with attribute type='text'?

A input:first-child

B input.text

C input[type='text']

D input#text

Key Result

Using CSS attribute selectors and pseudo-classes helps target elements precisely, making tests more reliable and easier to maintain.