Cursor rule

1> This file extends [common/testing.md](../common/testing.md) with web-specific testing content.
2 
3# Web Testing Rules
4 
5## Priority Order
6 
7### 1. Visual Regression
8 
9- Screenshot key breakpoints: 320, 768, 1024, 1440
10- Test hero sections, scrollytelling sections, and meaningful states
11- Use Playwright screenshots for visual-heavy work
12- If both themes exist, test both
13 
14### 2. Accessibility
15 
16- Run automated accessibility checks
17- Test keyboard navigation
18- Verify reduced-motion behavior
19- Verify color contrast
20 
21### 3. Performance
22 
23- Run Lighthouse or equivalent against meaningful pages
24- Keep CWV targets from [performance.md](performance.md)
25 
26### 4. Cross-Browser
27 
28- Minimum: Chrome, Firefox, Safari
29- Test scrolling, motion, and fallback behavior
30 
31### 5. Responsive
32 
33- Test 320, 375, 768, 1024, 1440, 1920
34- Verify no overflow
35- Verify touch interactions
36 
37## E2E Shape
38 
39```ts
40import { test, expect } from '@playwright/test';
41 
42test('landing hero loads', async ({ page }) => {
43  await page.goto('/');
44  await expect(page.locator('h1')).toBeVisible();
45});
46```
47 
48- Avoid flaky timeout-based assertions
49- Prefer deterministic waits
50 
51## Unit Tests
52 
53- Test utilities, data transforms, and custom hooks
54- For highly visual components, visual regression often carries more signal than brittle markup assertions
55- Visual regression supplements coverage targets; it does not replace them
56