playwright-expert

Run npm init playwright@latest to scaffold the project, then npx playwright install to download browsers. Configure playwright.config.ts with your testDir, baseURL, browser projects, and a webServer block that starts your dev server automatically.

Replace hardcoded waits with polling assertions like expect().toPass() and waitForLoadState('networkidle'). Enable retries in CI via the config retries option, use test.slow() for long operations, and capture traces on first retry for debugging.

Playwright is for end-to-end browser automation across real browsers, while Jest and Vitest handle unit and integration tests without a browser. Use Playwright for user-flow validation and a unit test runner for isolated logic.

Yes, page.route() intercepts network requests matching a URL pattern and lets you fulfill them with custom status codes and JSON bodies. This isolates frontend tests from backend availability.

Selectors tied to CSS classes or DOM structure break when markup changes. Use data-testid attributes as stable selectors and organize locators in Page Object Model classes so updates happen in one place.

Yes, toHaveScreenshot() captures a page snapshot and compares it against a baseline image, with maxDiffPixelRatio controlling tolerance. Baselines are stored per browser project and updated with the --update-snapshots flag.