PH

Pierre Houllière

CV Veille Rectorat Réalisations
Retour

Environnement de tests e2e du design system

Le design system de la Matmut est utilisé de manière transverse sur tous les portails web du groupe. Une modification mineure sur un composant de base peut provoquer un effet papillon et casser l’affichage de dizaines de pages. L’objectif était d’automatiser des tests end-to-end (e2e) pour garantir que le design system reste parfaitement fonctionnel.

Pour remplacer l’ancien outil devenu obsolète et trop complexe à maintenir, j’ai mené une analyse des différents outils disponibles sur le marché concernant les tests par régression visuelle.

Tableau d’analyse réalisé sur le Confluence interne, justifiant la mise en œuvre d’une veille technologique et la mise en place d’un environnement d’apprentissage.

J’ai rédigé l’intégralité des tests en TypeScript, structurés selon le design pattern Page Object Model afin de centraliser les sélecteurs et de rendre le code plus facile à maintenir.

Exemple de rédaction d’un test. Cette étape démontre la réalisation des tests d’intégration et d’acceptation du service, en simulant le parcours d’un utilisateur réel dans un navigateur.

L’outil capture une image de référence qu’il compare automatiquement à chaque nouveau lancement Des stratégies de masquage ont été configurées pour les éléments dynamiques (comme les vidéos) afin d’éviter les faux positifs.

Visualisation des différences. L’automatisation de ces contrôles visuels permet de vérifier les conditions de la continuité du service informatique lors de chaque mise à jour.