The single biggest source of flaky Playwright tests is bad selectors, so the framework steers you toward accessibility-driven queries. getByRole, getByLabel, getByPlaceholder, and getByText let you describe elements the way a user or screen reader would, which makes tests resilient to DOM refactors and visual redesigns. When semantics genuinely aren't available, such as unlabeled icon buttons or volatile i18n text, the escape hatch is a stable data-testid attribute added in a way that doesn't tie tests to copy or layout. You can rename the attribute globally through testIdAttribute in the config.
A Locator is more than a CSS string: it's a live handle that re-resolves on every action and participates in Playwright's strict mode. Most locator actions throw if more than one element matches, which forces you to disambiguate up front. Common disambiguation patterns include narrowing with .filter({ hasText } or { has: page.getByRole(...) }), scoping with a parent locator like a card or row, or as a last resort using .nth(i). The same scoping idea works inside iframes through frameLocator, where you call getByRole or getByTestId against the frame rather than the top page.
When the UI changes a lot, snapshotting accessibility trees with page.accessibility.snapshot() and asserting on role/name pairs catches a11y regressions in addition to functional ones. Combined with prefers-reduced-motion, disabled animations, fixed viewports, and consistent fonts, this strategy keeps visual tests stable. Where multiple similar elements exist, e.g. rows that share a button, scope the locator to its container first, then run getByRole inside that scope. This habit prevents the dreaded 'strict mode violation' errors that show up the moment a list grows by one row.