Visual Regression

Definition

Test qui compare des captures d'ecran pixel par pixel pour detecter les changements visuels involontaires dans l'interface. Utilise des outils comme Chromatic ou Percy.

Analogie

Comme superposer deux photos d'un tableau et chercher la moindre difference de couleur ou de position.

Exemple de code

// Avec Storybook + Chromatic
// 1. Ecrire les stories
export const Primary = () => <Button primary>OK</Button>;
// 2. Chromatic capture automatiquement
// 3. Toute diff visuelle => review requise
// npx chromatic --project-token=xxx

Cas d'usage

Pour les design systems et applications ou la coherence visuelle pixel-perfect est critique.

Anti-pattern

Termes lies