browser-testinglisted

# Browser Testing Methodology ## 1. When to Write a Browser Test vs Unit Test **Browser test (Playwright):** - Cross-component flows (sidebar click updates chat panel) - SSE streaming verification (message send → streaming indicator → response rendered) - Real API calls through the full stack (client → Express → Agent SDK) - CSS/layout regressions visible only in a real browser - Browser-specific behavior (keyboard shortcuts, focus management) **Unit test (Vitest):** - Individual component rendering and props - Hook logic and state transitions - Service functions and data transformations - Schema validation (Zod) - Pure utility functions **Rule of thumb:** If the behavior spans multiple FSD layers or requires a real server, it's a browser test. ## 2. Page Object Model Patterns POMs live in `apps/e2e/pages/` and are injected as Playwright fixtures via `fixtures/index.ts`. Each POM encapsulates locators and interaction methods for one page or component: ```typescript // apps/e2e/pages/FeaturePage.ts import type { Page, Locator } from '@playwright/test'; export class FeaturePage { readonly page: Page; readonly primaryAction: Locator; constructor(page: Page) { this.page = page; this.primaryAction = page.getByRole('button', { name: /action/i }); } async doAction() { await this.primaryAction.click(); } } ``` Register in fixtures: ```typescript // apps/e2e/fixtures/index.ts import { test as base } from '@playwright/test'; import { FeaturePage }