Playwright Locator Advisor
Paste any HTML snippet to automatically generate Playwright locators. The tool ranks suggestions based on official Playwright best practices (accessibility attributes first: getByRole > getByText > getByTestId > CSS/XPath). It also flags fragile locators that are prone to breaking.
Locator Advisor
HTML to Playwright Locators
Frequently Asked Questions(click to expand)
Why does Playwright recommend getByRole?
Playwright strongly recommends using accessibility-focused locators like getByRole, getByLabel, and getByText. These locators interact with the application the same way real users and assistive technologies do. If a button is a semantic <button> with text, a visually impaired user relies on that role and name, just like Playwright should.
Why are CSS and XPath ranked as "fragile"?
CSS selectors and XPath expressions often reflect the underlying DOM structure rather than the user-facing contract. If a developer refactors the UI, changes a class name, or wraps an element in a new <div>, the CSS/XPath will break, causing a flaky test. By contrast, a user-facing label or button text rarely changes during a structural refactor.
When should I use getByTestId?
When user-facing attributes aren't sufficient or when dealing with dynamic, unpredictable content, adding a data-testid is a great fallback. Playwright treats test IDs as resilient handles that don't change based on styling or translation updates.