One of Playwright api’s tenet for writing robust tests is..

“Prefer user facing/accessibility attributes for selecting elements vs writing CSS/XPath selectors”

This ,again, is a new mindset towards writing UI Automation code as you are less prone to DOM changes invalidating your selectors, in turn leading to less flaky tests .

The Playwright API facilitates this tenet by providing ( my new fav) method page.getByRole() .

getByRole() combines what the element looks like to an end user ( e.g. a button, a text box ) , with what it’s accessibility features are ( e.g. name) , and what you get is robust & intuitive to read/write code to select an element, like this –>

// get me a text box with this name

// click a button with this name for me please

versus…

// locate me an element with this CSS

I would encourage new Playwright practitioners to explore .getByRole() and see if they find this newer way to select element more intuitive & robust than purely using CSS/XPath ?

https://playwright.dev/docs/locators#locate-by-role