webapp-testing

# Web App Testing ## Testing Pyramid ``` /\ /E2E\ ← Few, slow, high confidence (Playwright) /------\ / Integr \ ← Some, medium speed (RTL + MSW) /----------\ / Unit/Comp \ ← Many, fast, isolated (Vitest + RTL) /--------------\ ``` ## Playwright Setup ```bash npm i -D @playwright/test npx playwright install chromium firefox webkit ``` ```typescript // playwright.config.ts import { defineConfig, devices } from '@playwright/test' export default defineConfig({ testDir: './e2e', timeout: 30_000, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : undefined, reporter: [['html'], ['list']], use: { baseURL: 'http://localhost:3000', trace: 'on-first-retry', screenshot: 'only-on-failure', video: 'retain-on-failure', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, { name: 'firefox', use: { ...devices['Desktop Firefox'] } }, { name: 'mobile', use: { ...devices['iPhone 14'] } }, ], webServer: { command: 'npm run build && npm run start', url: 'http://localhost:3000', reuseExistingServer: !process.env.CI, }, }) ``` ## Page Object Model ```typescript // e2e/pages/login.page.ts import { Page, Locator, expect } from '@playwright/test' export class LoginPage { readonly emailInput: Locator readonly passwordInput: Locator readonly submitButton: Locator readonly errorMessa...