frontend-testing

Use Playwright's web-first auto-waiting locators such as expect(locator).toBeVisible() instead of arbitrary delays. Strictly avoid sleep() and page.waitForTimeout(); wait for explicit UI state or network idle predicates instead.

Use MSW v2 with setupServer for Node/Vitest and setupWorker for browser or Playwright environments. Author handlers with standard fetch http.* methods and typed HttpResponse.json(), and enforce onUnhandledRequest: 'error' to catch unmocked requests.

Use component tests for isolated rendering variants, props, and focus traps; page or route tests for navigation and data loading; and end-to-end tests sparingly for high-risk multi-page journeys. Choose the smallest scope that proves the risk is covered.

Run @axe-core/playwright with AxeBuilder.withTags(['wcag2a', 'wcag2aa', 'wcag22aa']).analyze() in CI with zero violations allowed. Also verify keyboard focus containment in modals and focus restoration to the trigger element on Escape.

Cross-OS font rasterization and animations cause false-positive pixel diffs. Await document.fonts.ready, disable animations, mask dynamic elements like timestamps, run inside a containerized Linux environment, and set maxDiffPixelRatio to 0.002.

Use page.routeFromHAR() to record and replay deterministic network interactions when depending on external third-party APIs that are impractical to mock by hand. MSW v2 handlers remain the default for first-party API mocking.