Use Playwright's semantic locators (getByRole, getByText, getByLabel) and rely on built-in auto-waiting instead of manual sleeps

Steps

1. Prefer role-based locators such as `page.getByRole('button', { name: 'Submit' })` over CSS selectors to align with the accessibility tree and survive minor DOM refactors.
2. Use `getByLabel` for form inputs, `getByPlaceholder` for unlabelled inputs, and `getByTestId` when the team controls test-id attributes — each targets a stable semantic attribute.
3. Chain locators with `.filter({ hasText: '...' })` or `.nth(0)` to narrow results when a role matches multiple elements.
4. Call action methods (`click`, `fill`, `check`) directly on the locator; Playwright automatically waits for the element to be visible, stable, enabled, and not obscured before acting — no explicit `waitForSelector` needed.
5. Use `expect(locator).toBeVisible()` and other web-first assertions from `@playwright/test`; they retry until the condition is met or the timeout expires, eliminating most race conditions.