findElement by cssSelector in Selenium Java - Test Execution Trace

Test Overview

This test opens a web page, finds a button using a CSS selector, clicks it, and verifies the button's text changes as expected.

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.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 CssSelectorTest {
    private WebDriver driver;

    @BeforeEach
    public void setUp() {
        driver = new ChromeDriver();
    }

    @Test
    public void testFindElementByCssSelector() {
        driver.get("https://example.com/buttonpage");
        WebElement button = driver.findElement(By.cssSelector("button#submit-btn.primary"));
        button.click();
        String buttonText = button.getText();
        assertEquals("Submitted", buttonText);
    }

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

Execution Trace - 6 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 URL https://example.com/buttonpage	Browser displays the page with a button having id 'submit-btn' and class 'primary'	-	PASS
3	Find element using CSS selector 'button#submit-btn.primary'	Button element located on the page	Element is found and is a button with correct id and class	PASS
4	Click the found button element	Button is clicked, triggering page or element update	-	PASS
5	Get text of the button after click	Button text is now 'Submitted'	Assert that button text equals 'Submitted'	PASS
6	Test ends and browser closes	Browser window is closed	-	PASS

Failure Scenario

Failing Condition: The CSS selector does not match any element on the page

Execution Trace Quiz - 3 Questions

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

A A button element with id 'submit-btn' and class 'primary'

B Any element with id 'submit-btn' or class 'primary'

C Any button element with class 'submit-btn' and id 'primary'

D A div element with id 'submit-btn' and class 'primary'

Key Result

Use precise CSS selectors combining tag, id, and class to reliably find elements. Always assert expected changes after interactions.