CSS selector syntax in Selenium Java - Test Execution Trace

Test Overview

This test opens a web page and uses a CSS selector to find a button element by its class. It then clicks the button and verifies that a confirmation message appears, ensuring the CSS selector syntax works correctly.

Test Code - JUnit with Selenium WebDriver

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.assertEquals;

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

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

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

        // Find button using CSS selector by class
        WebElement button = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("button.btn-primary")));
        button.click();

        // Verify confirmation message appears
        WebElement message = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.confirmation-message")));
        String text = message.getText();
        assertEquals("Action completed successfully", text);
    }

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

Execution Trace - 7 Steps

Step	Action	System State	Assertion	Result
1	Test starts and Chrome browser opens	Browser window is open and ready	-	PASS
2	Navigates to https://example.com/testpage	Page loads with a button having class 'btn-primary'	-	PASS
3	Waits until button with CSS selector 'button.btn-primary' is present and finds it	Button element is located in the DOM	Element presence verified by WebDriverWait	PASS
4	Clicks the button	Button is clicked, triggering page action	-	PASS
5	Waits until confirmation message with CSS selector 'div.confirmation-message' is visible	Confirmation message appears on the page	Visibility of confirmation message verified	PASS
6	Gets text from confirmation message and asserts it equals 'Action completed successfully'	Text matches expected confirmation message	assertEquals passes confirming correct message text	PASS
7	Test ends and browser closes	Browser window is closed	-	PASS

Failure Scenario

Failing Condition: CSS selector does not match any element or element is not present/visible

Execution Trace Quiz - 3 Questions

What does the CSS selector 'button.btn-primary' select?

A A button element with class 'btn-primary'

B Any element with class 'btn-primary'

C A button element with id 'btn-primary'

D Any button element inside an element with class 'btn-primary'

Key Result

Always use explicit waits with correct CSS selectors to ensure elements are present before interacting, preventing flaky tests.