CSS selector syntax in Selenium Java - Build an Automation Script

Verify login button using CSS selector

Preconditions (1)

Step 1: Locate the login button using CSS selector '#loginBtn'

Step 2: Click the login button

Step 3: Verify that the URL changes to 'https://example.com/dashboard'

✅ Expected Result: After clicking the login button located by CSS selector, the user is redirected to the dashboard page URL

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Verify the login button is found using CSS selector '#loginBtn'

Verify the page URL after clicking the button is 'https://example.com/dashboard'

Best Practices:

Use explicit waits to wait for the login button to be clickable

Use By.cssSelector locator strategy

Avoid using brittle or overly complex CSS selectors

Use Page Object Model pattern for element locators

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 java.time.Duration;

public class CssSelectorTest {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

        try {
            // Navigate to login page
            driver.get("https://example.com/login");

            // Wait for login button to be clickable using CSS selector
            WebElement loginButton = wait.until(
                ExpectedConditions.elementToBeClickable(By.cssSelector("#loginBtn"))
            );

            // Assert login button is displayed
            if (!loginButton.isDisplayed()) {
                throw new AssertionError("Login button is not displayed");
            }

            // Click the login button
            loginButton.click();

            // Wait for URL to change to dashboard
            wait.until(ExpectedConditions.urlToBe("https://example.com/dashboard"));

            // Assert current URL is dashboard
            String currentUrl = driver.getCurrentUrl();
            if (!"https://example.com/dashboard".equals(currentUrl)) {
                throw new AssertionError("Expected URL 'https://example.com/dashboard' but got '" + currentUrl + "'");
            }

            System.out.println("Test Passed: Login button clicked and dashboard loaded.");
        } finally {
            driver.quit();
        }
    }
}

This test script uses Selenium WebDriver with Java to automate the manual test case.

First, it opens the Chrome browser and navigates to the login page URL.

It uses an explicit wait to wait until the login button is clickable, locating it by the CSS selector #loginBtn. This ensures the element is ready for interaction.

Then it asserts the button is displayed on the page to confirm the locator is correct.

Next, it clicks the login button and waits until the URL changes to the expected dashboard URL.

Finally, it asserts the current URL matches the expected dashboard URL to verify successful navigation.

The test prints a success message if all assertions pass and closes the browser in a finally block to ensure cleanup.

Common Mistakes - 4 Pitfalls

Using Thread.sleep() instead of explicit waits

Using overly complex or brittle CSS selectors

Mixing locator strategies inconsistently

Not verifying the element is displayed before clicking

Bonus Challenge

Now add data-driven testing with 3 different CSS selectors for login buttons on different pages

Show Hint

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