Verify login button presence using XPath and CSS selectors

Preconditions (1)

Step 1: Locate the login button using XPath selector

Step 2: Verify the login button is displayed

Step 3: Locate the login button using CSS selector

Step 4: Verify the login button is displayed

✅ Expected Result: The login button is found and visible using both XPath and CSS selectors

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Assert that the login button is displayed after locating by XPath

Assert that the login button is displayed after locating by CSS selector

Best Practices:

Use By.xpath() and By.cssSelector() consistently

Use explicit waits to wait for element visibility

Avoid overly complex XPath expressions

Prefer CSS selectors for better performance when possible

Use descriptive variable names

Handle exceptions gracefully

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.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.assertTrue;
import java.time.Duration;

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

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

    @Test
    public void testLoginButtonUsingXPath() {
        By loginButtonXPath = By.xpath("//button[@id='loginBtn']");
        WebElement loginButton = wait.until(ExpectedConditions.visibilityOfElementLocated(loginButtonXPath));
        assertTrue(loginButton.isDisplayed(), "Login button should be visible using XPath");
    }

    @Test
    public void testLoginButtonUsingCssSelector() {
        By loginButtonCss = By.cssSelector("button#loginBtn");
        WebElement loginButton = wait.until(ExpectedConditions.visibilityOfElementLocated(loginButtonCss));
        assertTrue(loginButton.isDisplayed(), "Login button should be visible using CSS selector");
    }

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

This test class uses Selenium WebDriver with Java and JUnit 5.

setUp() method initializes the ChromeDriver and opens the login page URL.

Two test methods verify the login button presence:

testLoginButtonUsingXPath() locates the button by XPath //button[@id='loginBtn'] and waits until it is visible, then asserts it is displayed.
testLoginButtonUsingCssSelector() locates the same button by CSS selector button#loginBtn with explicit wait and asserts visibility.

Explicit waits ensure the test waits for the element to appear instead of failing immediately.

tearDown() closes the browser after each test.

This approach shows how to choose between XPath and CSS selectors for locating elements, emphasizing best practices like explicit waits and clear assertions.

Common Mistakes - 4 Pitfalls

Using Thread.sleep() instead of explicit waits

Using overly complex or absolute XPath expressions

Mixing locator strategies inconsistently

Not handling exceptions when element is not found

Bonus Challenge

Now add data-driven testing with 3 different login button IDs to verify presence using both XPath and CSS selectors.

Show Hint