Cheatsheets
XPath & CSS Selectors Cheatsheet
Axes, functions, syntax patterns, and real portal examples for writing precise element locators.
1. XPath Axes
Navigate the DOM tree relative to the current node
| Axis | Syntax | Example | Use Case |
|---|---|---|---|
| parent | Get the container of an input field | //input[@id="userId"]/parent::div | |
| child | Direct children only | //div[@id="dashboard"]/child::span | |
| ancestor | Find the form containing a button | //button[@id="loginBtn"]/ancestor::form | |
| descendant | All buttons inside cart (any depth) | //div[@id="cartItems"]/descendant::button | |
| following-sibling | Input next to a label | //label[text()="Email"]/following-sibling::input | |
| preceding-sibling | Label before an input | //input[@id="password"]/preceding-sibling::label | |
| following | First table after a heading | //h2[text()="Earnings"]/following::table[1] | |
| preceding | Last input before submit | //button[@id="submitBtn"]/preceding::input[1] | |
| self | Current node (used in conditions) | //input[@id="userId"]/self::input |
2. XPath Functions
Match elements by text, position, and attributes
| Function | Syntax | Example |
|---|---|---|
| text() | //button[text()="Login"] | Exact text match |
| contains() | //a[contains(text(),"Dashboard")] | Partial text match |
| starts-with() | //div[starts-with(@id,"flight-row")] | ID prefix match |
| normalize-space() | //span[normalize-space()="Net Pay"] | Ignore extra whitespace |
| last() | //table/tbody/tr[last()] | Last row in a table |
| position() | //table/tbody/tr[position()<=3] | First 3 rows |
| not() | //input[not(@disabled)] | All enabled inputs |
| and | //input[@type="text" and @required] | Multiple conditions (both true) |
| or | //button[@id="loginBtn" or @id="submitBtn"] | Either condition true |
| count() | //table/tbody/tr[count(td)>3] | Rows with more than 3 cells |
| contains(@class) | //div[contains(@class,"bg-emerald")] | Partial class match |
3. CSS Selector Syntax
Standard CSS selectors for browser automation
| Selector | Syntax | Example |
|---|---|---|
| By tag | input | All <input> elements |
| By ID | #loginBtn | Element with id="loginBtn" |
| By class | .add-to-cart-btn | Elements with that class |
| By attribute | [data-testid="hotel-card"] | Exact attribute match |
| Attr contains | [class*="bg-emerald"] | Class contains substring |
| Attr starts with | [id^="flight-row"] | ID starts with prefix |
| Attr ends with | [id$="-btn"] | ID ends with suffix |
| Direct child | form > input | Input directly inside form |
| Descendant | #cartItems button | Any button inside cart |
| Adjacent sibling | label + input | Input immediately after label |
| General sibling | h2 ~ table | Any table after an h2 |
| First child | tr:first-child | First row in table |
| Last child | tr:last-child | Last row in table |
| Nth child | tr:nth-child(3) | Third row |
| Nth of type | input:nth-of-type(2) | Second input element |
| Not selector | input:not([disabled]) | All enabled inputs |
4. Real Portal Examples
Practical selectors from TesterRank practice apps
| Target | XPath | CSS Selector | Portal |
|---|---|---|---|
| Login button | //button[@id="loginBtn"] | #loginBtn | Banking |
| User ID input | //input[@id="userId"] | #userId | Banking |
| Transaction rows | //table[@id="txnTable"]//tr | #txnTable tbody tr | Banking |
| Product card | //div[contains(@class,"product-card")] | .product-card | Shopping |
| Add to Cart button | //button[contains(@class,"add-to-cart")] | .add-to-cart-btn | Shopping |
| Search input | //input[@id="exploreSearch"] | #exploreSearch | Shopping |
| Cart badge count | //span[@id="cartCount"] | #cartCount | Shopping |
| Policy type dropdown | //select[@id="policyType"] | #policyType | Insurance |
| Premium amount | //div[@id="premiumAmount"] | #premiumAmount | Insurance |
| Employee row by name | //td[text()="Rajesh Kumar"]/parent::tr | tr:has(td:text("Rajesh Kumar")) | HRMS |
| Leave balance card | //div[@data-testid="leave-balance"] | [data-testid="leave-balance"] | HRMS |
| EMI calculator result | //div[@id="emiResult"] | #emiResult | Loan |
| Flight row by ID | //tr[@data-testid="flight-row-fb1"] | [data-testid="flight-row-fb1"] | Travel |
| Hotel card | //div[@data-testid="hotel-card"] | [data-testid="hotel-card"] | Travel |