CSS Selectors — Basics

// By tag name
driver.findElement(By.cssSelector("h1"));
driver.findElement(By.cssSelector("input"));
driver.findElement(By.cssSelector("button"));

// By class name (prefix with .)
driver.findElement(By.cssSelector(".product-card"));
driver.findElement(By.cssSelector(".product-name"));

// By ID (prefix with #)
driver.findElement(By.cssSelector("#userId"));
driver.findElement(By.cssSelector("#password"));

// Tag + class
driver.findElement(By.cssSelector("button.add-to-cart"));
driver.findElement(By.cssSelector("input.qty-select"));

// Multiple classes (no space between dots)
driver.findElement(By.cssSelector(".btn.btn-primary"));
driver.findElement(By.cssSelector(".tab.active"));

// Exact match: [attr='value']
driver.findElement(By.cssSelector("button[type='submit']"));
driver.findElement(By.cssSelector("[data-testid='loginBtn']"));
driver.findElement(By.cssSelector("input[name='password']"));

// Starts with: [attr^='value']
driver.findElement(By.cssSelector("[data-testid^='product-name']"));
// Matches: product-name-1, product-name-2, product-name-3...

// Ends with: [attr$='value']
driver.findElement(By.cssSelector("[data-testid$='-3']"));
// Matches: product-name-3, add-to-cart-3, product-price-3...

// Contains: [attr*='value']
driver.findElement(By.cssSelector("[data-testid*='filter']"));
// Matches: cat-filter-electronics, clear-filters...

// Has attribute (any value): [attr]
driver.findElement(By.cssSelector("[data-testid]"));
// Matches any element with a data-testid attribute

// Descendant (space) — child at ANY depth
driver.findElement(By.cssSelector(".product-item .product-name"));
driver.findElement(By.cssSelector("form input"));

// Child (>) — DIRECT child only
driver.findElement(By.cssSelector("form > button"));
driver.findElement(By.cssSelector("ul > li"));

// Adjacent sibling (+) — the NEXT sibling
driver.findElement(By.cssSelector("label + input"));

// General sibling (~) — ALL following siblings
driver.findElements(By.cssSelector("h2 ~ p"));