playwright-testing

Locator Strategies

BAD: CSS selectors couple tests to implementation. Breaks on refactors.

await page.locator('.btn-primary.submit-form').click();
await page.locator('#username-input').fill('alice');

GOOD: Semantic locators match user perception. Resilient to markup changes.

await page.getByRole('button', { name: 'Submit' }).click();
await page.getByLabel('Username').fill('alice');
await page.getByText('Welcome back').waitFor();
await page.getByPlaceholder('Search...').fill('query');
await page.getByTestId('checkout-total').textContent(); // Only when no semantic option