Предпочтительны user-facing локаторы: getByRole, getByLabel, getByText, getByPlaceholder, getByAltText, getByTitle, плюс getByTestId для стабильного контракта.
Разбор
- Role+name ближе к accessibility tree и устойчивее к вёрстке.
locator.css / XPath доступны, но хрупче при редизайне.
- Цепочки и фильтры:
getByRole('button').filter({ hasText: 'Save' }).
- Избегайте привязки к генерации classnames CSS-in-JS.
Пример
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByTestId('order-total').waitFor();
Итог
Локатор выбирают по смыслу для пользователя; test-id — запасной стабильный контракт с фронтом.