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