L’article explique comment détecter les régressions visuelles dans une CI en utilisant Playwright et Docker. L’idée principale est d’intégrer des tests de capture d’écran pour comparer l’apparence actuelle d’une page avec une référence, afin d’éviter des modifications CSS non détectées avant la mise en production. Playwright propose l’assertion toHaveScreenshot() qui compare les images et échoue si la différence dépasse un seuil configuré.
La mise en œuvre repose sur des tests simples couvrant les pages clés du site, mais nécessite un environnement déterministe pour éviter les faux positifs. L’équipe a dû éliminer les sources de variation, comme les images en lazy loading ou les polices web, en attendant que la page soit visuellement stable avant de capturer l’écran. Un helper stabilize() est utilisé pour attendre la fin du chargement des ressources et des polices.
Enfin, la solution est intégrée dans une CI via Docker pour garantir un rendu cohérent entre les machines, et les images de différence sont postées directement dans les commentaires des pull requests pour faciliter le diagnostic des régressions.
