Adding E2e Tests

Add E2E Tests (Playwright)

Use this skill when the user asks to add end-to-end tests, browser tests, integration tests, or set up Playwright.

Steps

1. Install Playwright

   npm init playwright@latest

This creates playwright.config.ts, a tests/ directory, and installs browsers. If the project already has a test runner, install manually:

   npm install -D @playwright/test
   npx playwright install

2. Configure `playwright.config.ts`

• Set baseURL to the local dev server URL (e.g. http://localhost:3000).
• Configure webServer to start the dev server automatically:

     webServer: {
       command: "npm run dev",
       url: "http://localhost:3000",
       reuseExistingServer: !process.env.CI,
     },

• Enable only chromium for local dev speed; enable all browsers in CI.

3. Create a smoke test — write a basic test that verifies the app loads:

   import { test, expect } from "@playwright/test";

   test("homepage loads", async ({ page }) => {
     await page.goto("/");
     await expect(page).toHaveTitle(/.+/);
   });

4. Add page object pattern (optional) — for larger apps, create a tests/pages/ directory with page objects that encapsulate selectors and actions.

5. Add npm scripts

   {
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   }

6. Add to `.gitignore`

   test-results/
   playwright-report/
   blob-report/

7. CI integration — add a GitHub Actions step that runs npx playwright install --with-deps then npm run test:e2e. Use the official actions/upload-artifact to save the HTML report on failure.

Notes

• Use data-testid attributes for selectors instead of CSS classes.
• Use test.describe to group related tests.
• Run npx playwright codegen to record tests interactively.