Je vais configurer la régression visuelle et les tests CI avec playwright pour votre application React

Livrer rapidement l’interface utilisateur avec Cursor, Copilot ou Claude ? Parfait pour la vitesse, risqué pour la cohérence. Une petite modification peut changer la couleur, l’espacement ou la police alors que les tests unitaires restent verts car ils vérifient la logique, pas l’apparence.

J’ai mis en place une garde-fou visuelle pour que l’IA et les humains puissent modifier l’UI rapidement tout en détectant les changements non intentionnels avant la fusion :

- Tokens de conception sémantiques : les couleurs et le texte deviennent des rôles nommés, pas des nuances aléatoires.

- Tests de régression visuelle : captures d’écran automatisées des écrans clés sur desktop et mobile.

- Application des règles CI : lint, build, vérifications visuelles et tests unitaires exécutés dans GitHub Actions.

Preuve : ma version de référence open-source Opsboard couvre 8 écrans avec 16 vérifications visuelles automatisées. La utilisation brute des couleurs a été réduite de 225 à 4 rôles nommés, validée sur un vrai runner GitHub Actions. Il s’agit d’une version de référence, non déployée chez un client, sans utilisateurs payants.

Meilleur cas d’usage : React ou Next.js avec Tailwind et GitHub Actions. Aucun siège Figma payant requis.

Ce qui n’est pas inclus : tests fonctionnels, de charge ou de sécurité ; redesign UI ; nouvelles fonctionnalités ; hébergement ; déploiement ; maintenance continue. Un devis séparé peut être fourni pour des extensions.

Contactez-moi avec votre repo, votre stack et vos pages principales pour une vérification de compatibilité.