Aller au contenu

Éradiquer les régressions visuelles grâce à BackstopJS

Par Corinne Schillinger

Atelier (1 h 30) :
Langue :
Français
  • Diaporama
  • Le sujet

    Les régressions visuelles sont certainement l'une des choses les plus pénibles à éviter lorsque l'on intègre ou maintient un site : il est souvent difficile d'être sûr à 100% qu'une modification CSS n'a pas d'effet de bord indésirable sur une page ou un composant annexe, même en vérifiant visuellement sur les différentes résolutions cible.

    Couplés à un styleguide, les outils de test de régressions visuelles sont d'une aide précieuse car ils permettent de déléguer cette tâche ingrate à un programme. Ce dernier génère automatiquement les captures d'écran et les compare entre elles pour voir si les modifications de code ont entraîné des changements visuels sur les différentes résolutions cible.

    Durant cet atelier, je vous propose de découvrir et d'apprendre à utiliser BackstopJS, un outil de test open source qui fonctionne avec Chrome Headless, Phantom et Slimer. Facile à installer, à configurer et à prendre en main, il y a de fortes chances qu'il s'intègre parfaitement à votre chaîne de développement.

    Présenté par