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.

Practice

1. Which CSS selector syntax correctly selects an element with the id submitBtn?

easy

A. #submitBtn

B. .submitBtn

C. submitBtn

D. *submitBtn

Solution

1. Step 1: Understand CSS id selector syntax

   In CSS, the # symbol is used to select elements by their id attribute.

2. Step 2: Match the selector to the id

   The selector #submitBtn targets the element with id="submitBtn" exactly.

3. Final Answer:

   #submitBtn -> Option A

4. Quick Check:

   Id selector uses # = #submitBtn [OK]

Hint: Use # before id names to select by id [OK]

Common Mistakes:

• Using . instead of # for id
• Omitting # and using just the id name
• Using * which selects all elements

2. Which of the following is the correct CSS selector to select all elements with the class active?

easy

A. #active

B. *active

C. .active

D. active

Solution

1. Step 1: Recall CSS class selector syntax

   Classes are selected using a dot . followed by the class name.

2. Step 2: Identify the correct selector

   The selector .active selects all elements with class="active".

3. Final Answer:

   .active -> Option C

4. Quick Check:

   Class selector uses . = .active [OK]

Hint: Use . before class names to select by class [OK]

Common Mistakes:

• Using # instead of . for class
• Omitting . and using just class name
• Using * which selects all elements

3. Given the HTML snippet:

<input type="text" name="username" class="input-field" id="user" />

Which CSS selector will select this input element by its attribute name?

medium

A. input[name='username']

B. input#username

C. input.class='input-field'

D. input[name=username]

Solution

1. Step 1: Understand attribute selector syntax

   To select elements by attribute, use square brackets with attribute and value: [attr='value'].

2. Step 2: Match the selector to the input element

   input[name='username'] selects input elements with name="username" exactly.

3. Final Answer:

   input[name='username'] -> Option A

4. Quick Check:

   Attribute selector uses [attr='value'] = input[name='username'] [OK]

Hint: Use [attr='value'] to select by attribute [OK]

Common Mistakes:

• Missing quotes around attribute value
• Using # for attribute instead of []
• Incorrect syntax like input.class='input-field'

4. Identify the error in this CSS selector used in Selenium:
driver.findElement(By.cssSelector("div#main .content > p:first-child"));
What is wrong with this selector?

medium

A. The pseudo-class ':first-child' is not supported in CSS selectors.

B. The space between 'div#main' and '.content' is incorrect.

C. The '>' combinator cannot be used with classes.

D. The selector syntax is correct and will work as expected.

Solution

1. Step 1: Analyze the selector components

   The selector targets a p element that is the first child inside an element with class content, which is inside a div with id main.

2. Step 2: Check CSS selector validity in Selenium

   All parts including #main, .content, child combinator >, and pseudo-class :first-child are valid CSS selectors supported by Selenium.

3. Final Answer:

   The selector syntax is correct and will work as expected. -> Option D

4. Quick Check:

   Valid CSS selector syntax = correct [OK]

Hint: Check if selector uses valid CSS syntax supported by Selenium [OK]

Common Mistakes:

• Assuming pseudo-classes like :first-child are unsupported
• Misunderstanding combinator usage
• Thinking spaces between selectors are always wrong

5. You want to select all button elements that have both the class btn and an attribute data-action equal to save. Which CSS selector is correct?

hard

A. button#btn[data-action=save]

B. button.btn[data-action='save']

C. button .btn[data-action='save']

D. button.btn[data-action=save]

Solution

1. Step 1: Combine class and attribute selectors correctly

   To select elements with a class and attribute, chain selectors without spaces: button.btn[data-action='save'].

2. Step 2: Verify syntax details

   Quotes around attribute value are recommended for exact matching; no spaces between element, class, and attribute selectors.

3. Final Answer:

   button.btn[data-action='save'] -> Option B

4. Quick Check:

   Combine selectors without spaces = button.btn[data-action='save'] [OK]

Hint: Chain selectors without spaces; quote attribute values [OK]

Common Mistakes:

• Using spaces between element and class selectors
• Omitting quotes around attribute values
• Using # instead of . for class