Visual Regression

Définition

Test qui compare des captures d'écran pixel par pixel pour détecter 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 différence 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 cohérence visuelle pixel-perfect est critique.

Anti-pattern

Termes liés