findElement by cssSelector in Selenium Java - Build an Automation Script

Verify login button is clickable 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, the user is redirected to the dashboard page with URL 'https://example.com/dashboard'

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Verify the login button is found using CSS selector

Verify the login button is clickable

Verify the 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

Use assertions from TestNG or JUnit

Close the browser after test execution

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 org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

import java.time.Duration;

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

    @BeforeClass
    public void setUp() {
        // Set path to chromedriver if needed
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
        driver.get("https://example.com/login");
    }

    @Test
    public void testLoginButtonClickable() {
        // Locate login button by CSS selector
        WebElement loginButton = wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("#loginBtn")));

        // Assert button is displayed and enabled
        Assert.assertTrue(loginButton.isDisplayed(), "Login button should be visible");
        Assert.assertTrue(loginButton.isEnabled(), "Login button should be enabled");

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

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

        // Assert URL is correct
        Assert.assertEquals(driver.getCurrentUrl(), "https://example.com/dashboard", "URL should be dashboard after login");
    }

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

This test uses Selenium WebDriver with Java and TestNG framework.

In setUp(), we open the browser and navigate to the login page.

In the test method, we use By.cssSelector("#loginBtn") to find the login button by its CSS ID selector.

We use an explicit wait to wait until the button is clickable to avoid timing issues.

We assert the button is visible and enabled before clicking it.

After clicking, we wait until the URL changes to the dashboard URL and assert it matches the expected URL.

Finally, tearDown() closes the browser to clean up.

Common Mistakes - 4 Pitfalls

Using Thread.sleep() instead of explicit waits

{'mistake': 'Using incorrect locator like By.id("loginBtn") when the element requires CSS selector', 'why_bad': 'If the element is not found by the locator, the test will fail immediately.', 'correct_approach': 'Use By.cssSelector("#loginBtn") as specified to locate the element correctly.'}

Not verifying the element is clickable before clicking

Not closing the browser after test

Bonus Challenge

Now add data-driven testing with 3 different CSS selectors for different buttons on the page

Show Hint

Practice

1. What does driver.findElement(By.cssSelector(".btn-primary")) do in Selenium Java?

easy

A. Finds all elements with class 'btn-primary' on the page

B. Finds the first element with class 'btn-primary' on the page

C. Finds the element with id 'btn-primary'

D. Throws an error if any element has class 'btn-primary'

Solution

1. Step 1: Understand the method used

   findElement returns the first matching element found on the page.

2. Step 2: Analyze the CSS selector

   The selector .btn-primary matches elements with class btn-primary.

3. Final Answer:

   Finds the first element with class 'btn-primary' on the page -> Option B

4. Quick Check:

   findElement + .class = first matching element [OK]

Hint: findElement + .class finds first element with that class [OK]

Common Mistakes:

• Confusing findElement with findElements
• Using id selector syntax for class
• Thinking it finds all matching elements

2. Which of the following is the correct syntax to find an element with id 'login' using CSS selector in Selenium Java?

easy

A. driver.findElement(By.cssSelector(".login"));

B. driver.findElement(By.cssSelector("*login"));

C. driver.findElement(By.cssSelector("login"));

D. driver.findElement(By.cssSelector("#login"));

Solution

1. Step 1: Identify CSS selector for id

   In CSS, id selectors start with #, so #login selects element with id 'login'.

2. Step 2: Check syntax correctness

   The syntax driver.findElement(By.cssSelector("#login")); is correct for Selenium Java.

3. Final Answer:

   driver.findElement(By.cssSelector("#login")); -> Option D

4. Quick Check:

   Id selector uses # [OK]

Hint: Use # for id selectors in CSS [OK]

Common Mistakes:

• Using . instead of # for id
• Missing quotes around selector
• Using invalid selector syntax

3. What will be the result of this code snippet?

WebElement element = driver.findElement(By.cssSelector("div.content > p.highlight"));
String text = element.getText();
System.out.println(text);

Assuming the HTML is:

<div class="content">
  <p class="highlight">Hello</p>
  <p>World</p>
</div>

medium

A. HelloWorld

B. World

C. Hello

D. NoSuchElementException

Solution

1. Step 1: Understand the CSS selector used

   div.content > p.highlight selects a p element with class highlight that is a direct child of div with class content.

2. Step 2: Match selector to HTML

   The first p inside div.content has class highlight and text "Hello".

3. Final Answer:

   Hello -> Option C

4. Quick Check:

   Selector matches first p.highlight text [OK]

Hint: Use > for direct child in CSS selectors [OK]

Common Mistakes:

• Ignoring direct child combinator >
• Selecting wrong paragraph text
• Assuming all p tags are selected

4. Identify the error in this Selenium Java code:

WebElement button = driver.findElement(By.cssSelector("button#submit-btn.active"));
button.click();

Given the HTML:

<button id="submit-btn">Submit</button>

medium

A. CSS selector requires both id and class but element has no class 'active'

B. Syntax error in findElement method call

C. button.click() is invalid method

D. NoSuchElementException because id selector is wrong

Solution

1. Step 1: Analyze the CSS selector

   The selector button#submit-btn.active looks for a button with id submit-btn AND class active.

2. Step 2: Compare with HTML element

   The button has id submit-btn but no class active, so selector matches no element.

3. Final Answer:

   CSS selector requires both id and class but element has no class 'active' -> Option A

4. Quick Check:

   Selector requires all parts to match [OK]

Hint: All parts in CSS selector must match element attributes [OK]

Common Mistakes:

• Assuming partial match works in CSS selector
• Ignoring missing class in element
• Thinking click() method is invalid

5. You want to find the first input element inside a form with class 'search' that is enabled and visible. Which CSS selector is best to use with findElement in Selenium Java?

hard

A. form.search input:not([disabled])

B. form.search > input[disabled='false']

C. form.search input:enabled

D. form.search input[visible='true']

Solution

1. Step 1: Understand CSS selectors for enabled inputs

   CSS does not have a standard :enabled pseudo-class for all browsers; instead, :not([disabled]) selects inputs without the disabled attribute.

2. Step 2: Check options for correctness

   form.search input:enabled uses :enabled which is not widely supported in CSS selectors for Selenium.
   form.search > input[disabled='false'] uses attribute [disabled='false'] which is invalid because disabled is boolean attribute.
   form.search input:not([disabled]) uses :not([disabled]) which correctly selects enabled inputs.
   form.search input[visible='true'] uses [visible='true'] which is not a valid attribute for visibility.

3. Final Answer:

   form.search input:not([disabled]) -> Option A

4. Quick Check:

   Use :not([disabled]) to find enabled inputs [OK]

Hint: Use :not([disabled]) to select enabled inputs [OK]

Common Mistakes:

• Using unsupported :enabled pseudo-class
• Checking disabled='false' attribute incorrectly
• Using non-existent visible attribute