Anki Playwright Agents

npm i -D @playwright/test
npx playwright install
npx playwright test

Common: ./tests or ./e2e (you choose). Configure testDir in playwright.config.ts so agents know where to add new tests.

use.baseURL, webServer (start app), projects (chromium/firefox/webkit), retries/workers, reporter (html + junit), trace/video/screenshot policies.

Use playwright.config.ts webServer: { command: "npm run dev", url: "http://127.0.0.1:3000", reuseExistingServer: !process.env.CI }.

npx playwright test tests/foo.spec.ts
npx playwright test -g "test name"

PWDEBUG=1 npx playwright test -g "name" --headed
or npx playwright test --debug (inspector)

Prefer getByRole/getByLabel/getByPlaceholder for resilient tests. Add data-testid only when semantics are missing or ambiguous.

When UI text is unstable (i18n), roles are missing, or multiple similar elements exist. Keep ids stable and semantic (e.g., save-button).

Create storageState once (globalSetup) and set test.use({ storageState: "storageState.json" }) to avoid logging in every test.

Seed data via API/db fixtures, use unique test IDs per run, and clean up. Avoid depending on existing prod-like data.

Use Playwright auto-wait + expect(locator).toBeVisible/toHaveText/toHaveURL. Avoid page.waitForTimeout except as last resort.

expect(page).toHaveScreenshot("home.png") or expect(locator).toHaveScreenshot("card.png")