Recommended Locator Priority
1.
page.getByRole(role, { name }): Accessible buttons, links, headings.
2.
page.getByLabel("Email"): Inputs associated with
<label>.
3.
page.getByPlaceholder("Search"): Inputs without visible labels.
4.
page.getByText("Order Placed"): Static text.
5.
page.getByTestId("checkout-btn"): Dedicated QA test id.
// Locator Chaining & Filtering:
const targetCard = page.locator(".product-card")
.filter({ hasText: "MacBook Pro" });
await targetCard.getByRole("button", { name: "Add to Cart" }).click();