# Visual regression — Playwright

## Local

```sh
pnpm install
pnpm exec playwright install chromium    # première fois uniquement
pnpm test:visual                          # lance les tests
pnpm test:visual:update                   # met à jour le baseline
pnpm test:visual:report                   # ouvre le rapport HTML
```

## CI

Le workflow `.github/workflows/ci.yml` exécute les tests visuels sur
chaque PR. Si un test échoue :

1. Télécharger l'artifact `playwright-report` depuis l'action.
2. Comparer screenshots actuels / baseline.
3. **Régression réelle** → fix le composant.
4. **Changement intentionnel** → bumper le baseline via PR :
   ```sh
   pnpm test:visual:update
   git add e2e/__screenshots__
   git commit -m "chore(visual): update baseline pour <comp>"
   ```

## Stratégie

- Screenshots des **stories critiques** uniquement (cf. `e2e/visual.spec.ts`).
- Light + Dark via projects Playwright.
- Threshold strict (0.2) — toute différence visible casse la CI.
- Baseline dans `e2e/__screenshots__/` versionné en git.
- Animations désactivées pour éviter la flakiness.

## Faux positifs courants

- **Fonts non chargées** : Playwright attend `networkidle` mais Figtree
  via Google Fonts peut être lent. Si flake, augmenter le timeout ou
  embarquer la font en local.
- **Anti-aliasing différent OS** : on teste en CI Linux (Chromium).
  Les screenshots locaux Windows / macOS peuvent différer légèrement.
  Toujours regen le baseline depuis CI.
- **Date dynamique** : si une story affiche `new Date()`, mocker via
  `page.clock` ou éviter dans la story (utiliser une date fixée).