Common Mistakes and Best Practices

// BAD — breaks if ANY element in the path changes
driver.findElement(By.xpath(
    "/html/body/div/div[2]/div/form/div[1]/div/input"));

// GOOD
driver.findElement(By.cssSelector("#userId"));

// BAD — auto-generated, changes every page load
driver.findElement(By.id("react-select-3-option-2"));
driver.findElement(By.className("css-1s2u09g-control"));

// GOOD — use stable attributes
driver.findElement(By.cssSelector("[data-testid='accountType']"));
driver.findElement(By.cssSelector("[id*='account-type']"));

// BAD — too many levels, any wrapper change breaks it
driver.findElement(By.cssSelector(
    "div.main > div.content > div.form-wrapper > form > div > input"));

// GOOD — go directly to the target
driver.findElement(By.cssSelector("#userId"));

// BAD — searches entire page, might match wrong element
WebElement name = driver.findElement(
    By.cssSelector(".product-name"));

// GOOD — scope within a specific product card
WebElement card = driver.findElement(
    By.cssSelector("[data-testid='product-item']:nth-child(1)"));
WebElement name = card.findElement(
    By.cssSelector(".product-name"));

// 1. Use data-testid (best)
driver.findElement(By.cssSelector("[data-testid='userId']"));

// 2. Partial attribute match (starts-with / contains)
driver.findElement(By.cssSelector("[id^='input-userId']"));

// 3. Use other stable attributes (name, placeholder, type)
driver.findElement(By.cssSelector(
    "input[placeholder='User ID / Email']"));

// 4. Parent-child relationship
driver.findElement(By.cssSelector(".login-form input[type='text']"));

// 5. Text-based XPath
driver.findElement(By.xpath(
    "//label[text()='Email']/following-sibling::div//input"));

// 6. aria-label attribute
driver.findElement(By.cssSelector("[aria-label='Search products']"));