Choosing XPath vs CSS strategy in Selenium Java - Test Execution Compared

Test Overview

This test opens a webpage and tries to find a button using both XPath and CSS selectors. It verifies that the button is clickable and visible, demonstrating the difference in locating elements with XPath and CSS strategies.

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

public class XPathVsCssTest {
    WebDriver driver;
    WebDriverWait wait;

    @BeforeEach
    public void setUp() {
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    }

    @Test
    public void testButtonWithXPathAndCss() {
        driver.get("https://example.com/testpage");

        // Locate button using XPath
        WebElement buttonByXPath = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//button[@id='submit-btn']")));
        assertTrue(buttonByXPath.isDisplayed(), "Button located by XPath should be visible");

        // Locate button using CSS Selector
        WebElement buttonByCss = wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("button#submit-btn")));
        assertTrue(buttonByCss.isDisplayed(), "Button located by CSS should be visible");

        // Click the button using CSS selector
        buttonByCss.click();
    }

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

Execution Trace - 8 Steps

Step	Action	System State	Assertion	Result
1	Test starts and Chrome browser opens	Chrome browser window is open and ready	-	PASS
2	Navigates to https://example.com/testpage	Page loads with a button having id 'submit-btn'	-	PASS
3	Waits until button located by XPath //button[@id='submit-btn'] is clickable	Button is present and clickable on the page	Verify button located by XPath is displayed	PASS
4	Asserts button located by XPath is visible	Button is visible	assertTrue(buttonByXPath.isDisplayed())	PASS
5	Waits until button located by CSS selector button#submit-btn is clickable	Button is present and clickable on the page	Verify button located by CSS is displayed	PASS
6	Asserts button located by CSS selector is visible	Button is visible	assertTrue(buttonByCss.isDisplayed())	PASS
7	Clicks the button located by CSS selector	Button click triggers expected action	-	PASS
8	Test ends and browser closes	Browser window is closed	-	PASS

Failure Scenario

Failing Condition: Button with id 'submit-btn' is not found or not clickable within 10 seconds

Execution Trace Quiz - 3 Questions

Which locator strategy is used to find the button first in the test?

A CSS Selector

B XPath

C ID locator

D Class name

Key Result

Use explicit waits with clear locator strategies like XPath or CSS selectors to reliably find elements. Choose CSS selectors for speed and simplicity when possible, XPath for complex queries.