Prioritize what users see and explicit contracts over DOM structure. Playwright recommends role-based locators (for example a button by its accessible name) and warns that CSS class chains and XPath break when designers change markup. Its code generator ranks role, text and test-id locators first, and it suggests chaining and filtering to narrow to part of the page. A practical order is role or label, then a dedicated test id where no accessible name exists, then CSS, with XPath as a last resort. Role-based locators also nudge the team toward accessible markup.

Sources: Playwright best practices