I tested 3 approaches to handling flaky selectors in Playwright - here's what actually held up
After months of brittle tests, I ran a deliberate comparison of selector strategies on a React app with frequent DOM changes.
Approach 1: CSS selectors - Fast to write, first to break. Any class refactor killed half our suite overnight.
Approach 2: data-testid attributes - Solid until you're testing third-party components you can't annotate. Also requires dev buy-in, which isn't always realistic.
Approach 3: ARIA roles + getByRole - This became our default. It survives styling changes, encourages accessible markup, and fails loudly when the UI actually breaks in a meaningful way rather than just a rename.
The tradeoff nobody mentions: getByRole requires your team to understand ARIA, which has a real learning curve. We had to do a short internal workshop before it clicked.
One thing that forced us to get even more disciplined about selectors: we also use Playwright for scrapin͏g workflows (collecting competit͏or pricin͏g data behind residential rotat͏ing prox͏ies via Geo͏node). When you're scraping sites you don't control, you can't add data-testid - so getByRole and robust locator chaining become essential, not optional. It changed how we thought about selector durability across our entire codebase.
Curious whether others have landed somewhere different. Anyone using locator chaining heavily, or leaning on filter() to narrow things down? I feel like that's underused in most codebases I've seen.