Why selector mastery prevents fragile tests in Selenium Java - Test Execution Impact

Test Overview

This test opens a login page, finds the username input using a robust CSS selector, enters a username, and verifies the input value. It shows how using a strong selector prevents test failures when page structure changes.

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

public class SelectorMasteryTest {
    WebDriver driver;

    @BeforeEach
    public void setUp() {
        driver = new ChromeDriver();
    }

    @Test
    public void testEnterUsernameWithRobustSelector() {
        driver.get("https://example.com/login");
        // Using a robust CSS selector with id and attribute
        WebElement usernameInput = driver.findElement(By.cssSelector("input#username[type='text']"));
        usernameInput.sendKeys("testuser");
        String enteredText = usernameInput.getAttribute("value");
        assertEquals("testuser", enteredText);
    }

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

Execution Trace - 6 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/login	Login page is loaded with username input field visible	—	PASS
3	Finds username input using CSS selector "input#username[type='text']"	Username input element is located on the page	Element found and ready for interaction	PASS
4	Enters text "testuser" into username input	Username input field contains text "testuser"	—	PASS
5	Gets the value attribute from username input	Retrieved value is "testuser"	Assert that entered text equals "testuser"	PASS
6	Test ends and browser closes	Browser window is closed	—	PASS

Failure Scenario

Failing Condition: Using a fragile selector like a generic tag or index that changes when page layout updates

Execution Trace Quiz - 3 Questions

Why is the selector "input#username[type='text']" considered robust?

A Because it uses a unique id and attribute to precisely find the element

B Because it uses only the tag name which is always stable

C Because it relies on the element's position in the DOM

D Because it uses a random class name that changes often

Key Result

Using unique and stable selectors like IDs or specific attributes makes tests less fragile and reduces failures caused by UI changes.

Practice

1. Why is it important to use unique attributes like id or name in Selenium selectors?

easy

A. They are harder to write and maintain.

B. They slow down the test execution significantly.

C. They always cause tests to fail.

D. They make tests more stable and less likely to break when the page changes.

Solution

1. Step 1: Understand selector uniqueness

   Unique attributes like id or name identify elements clearly without confusion.

2. Step 2: Impact on test stability

   Using unique selectors reduces the chance tests break when page layout or styles change.

3. Final Answer:

   They make tests more stable and less likely to break when the page changes. -> Option D

4. Quick Check:

   Unique selectors = stable tests [OK]

Hint: Pick selectors with unique attributes for stable tests [OK]

Common Mistakes:

• Choosing selectors based on visible text only
• Using generic tags like div without attributes
• Ignoring the importance of uniqueness

2. Which of the following is the correct syntax to locate an element by its id in Selenium Java?

easy

A. driver.findElement(By.id("submitBtn"));

B. driver.findElement(By.name="submitBtn");

C. driver.findElement(By.className("submitBtn"));

D. driver.findElement(By.tag("submitBtn"));

Solution

1. Step 1: Recall Selenium locator syntax

   The correct method to find by id is By.id("value").

2. Step 2: Check each option

   driver.findElement(By.id("submitBtn")); uses By.id("submitBtn"), which is correct syntax. Others use incorrect methods or syntax.

3. Final Answer:

   driver.findElement(By.id("submitBtn")); -> Option A

4. Quick Check:

   Use By.id("...") for id selectors [OK]

Hint: Use By.id("...") to select by id attribute [OK]

Common Mistakes:

• Using assignment (=) instead of method parameter syntax
• Confusing By.name and By.id
• Using non-existent locator methods like By.tag

3. Given the following code snippet, what will be the output if the element with id loginBtn is not present on the page?

try {
  WebElement button = driver.findElement(By.id("loginBtn"));
  System.out.println("Button found");
} catch (NoSuchElementException e) {
  System.out.println("Button not found");
}

medium

A. Button found

B. Button not found

C. No output

D. Compilation error

Solution

1. Step 1: Understand findElement behavior

   If the element is missing, findElement throws NoSuchElementException.

2. Step 2: Analyze try-catch block

   The exception is caught, so the catch block prints "Button not found".

3. Final Answer:

   Button not found -> Option B

4. Quick Check:

   Missing element triggers catch block [OK]

Hint: Missing element triggers NoSuchElementException catch [OK]

Common Mistakes:

• Assuming findElement returns null if not found
• Ignoring exception handling
• Confusing findElement with findElements

4. You wrote this selector: driver.findElement(By.xpath("//div[@class='btn']")). Your test breaks when the page adds another div with class btn. How can you fix this fragile selector?

medium

A. Use Thread.sleep() before finding the element.

B. Change the selector to By.tagName("div") to select all divs.

C. Use a more specific attribute like an id or unique data-test attribute.

D. Remove the class condition and select by div only.

Solution

1. Step 1: Identify fragility cause

   The selector matches multiple elements because class btn is not unique.

2. Step 2: Improve selector specificity

   Using a unique attribute like id or data-test makes the selector stable and precise.

3. Final Answer:

   Use a more specific attribute like an id or unique data-test attribute. -> Option C

4. Quick Check:

   Specific unique attributes prevent fragile selectors [OK]

Hint: Pick unique attributes to avoid multiple matches [OK]

Common Mistakes:

• Selecting all divs causes more fragility
• Ignoring selector uniqueness
• Using waits instead of fixing selectors

5. You have a test that uses this selector:
driver.findElement(By.cssSelector("button.submit-btn"))
After a page update, the class name changes to submit-button. What is the best way to prevent such fragile tests in the future?

hard

A. Ask developers to add a unique data-test attribute and use it in selectors.

B. Use XPath with contains() to match partial class names.

C. Use absolute XPath from the root element to the button.

D. Avoid using selectors and rely on screen coordinates.

Solution

1. Step 1: Understand fragility cause

   Class names often change due to styling updates, breaking selectors based on them.

2. Step 2: Use stable attributes for selectors

   Unique data-test attributes are designed for testing and rarely change, making tests stable.

3. Final Answer:

   Ask developers to add a unique data-test attribute and use it in selectors. -> Option A

4. Quick Check:

   Stable test attributes prevent fragile selectors [OK]

Hint: Use dedicated test attributes like data-test for stable selectors [OK]

Common Mistakes:

• Using fragile class names in selectors
• Using absolute XPath which breaks easily
• Relying on screen coordinates which are unreliable