hjemmesidekongen/playwright-testing

Playwright Testing

Playwright provides auto-waiting, multi-browser support, and a rich toolchain. Use its built-in patterns — don't work around them.

Locator Strategy (priority order)

1. getByRole — semantic, resilient, accessible
2. getByLabel — form inputs
3. getByPlaceholder — inputs without labels
4. getByText — text-only elements (be specific, not partial)
5. getByTestId — fallback when semantics aren't enough
6. CSS/XPath — last resort only

Chain locators to narrow scope: page.getByRole('dialog').getByRole('button', { name: 'Submit' }).

Assertions

Use expect(locator) — all Playwright assertions auto-wait. Never assert on .textContent() values directly.

Key assertions: toBeVisible, toHaveText, toHaveValue, toHaveURL, toHaveCount, toBeChecked.

Soft assertions let a test continue after failure: expect.soft(locator).toBeVisible(). Check expect(page).toHaveURL() for navigation confirmation.

Fixture Model

Extend test with test.extend<{}>() to inject reusable page wrappers and auth state. Keep fixtures in fixtures/ and re-export a custom test object. Auth state goes in storageState — run auth once, reuse across tests.

CI Considerations

Run with --workers=4 or --shard=1/4 for parallel execution. Retry flaky tests with retries: 2 in playwright.config.ts. Always store traces and screenshots as artifacts on failure. Use reporter: [['html'], ['github']] for GitHub Actions native annotations.

See references/process.md for full implementation detail: locators, assertions, fixtures, visual comparison, network mocking, API testing, trace viewer, sharding, debugging, and anti-patterns.