8. User-First Locators & Selection Strategies

Priority Locator Hierarchy

1. page.getByRole(role, { name }): Accessible buttons, links, inputs, headings. 2. page.getByLabel("Email"): Form inputs with labels. 3. page.getByPlaceholder("Search"): Inputs without labels. 4. page.getByText("Order Placed"): Static text. 5. page.getByTestId("checkout-btn"): Dedicated QA test id.

// Chaining & Filtering:
const orderRow = page.locator("tr", { hasText: "Order #104" });
await orderRow.getByRole("button", { name: "Delete" }).click();