Automatisez vos tests d’intégration avec Pediff

Comment ça marche ?

Pediff est un outil basé sur casper.js (lui-même basé sur phantom.js pour les connaisseurs), outil qui permet de récupérer le code HTML d'un site web et de "l'afficher" sans pour autant besoin d'un serveur graphique. Cela permet par exemple de reproduire le rendu de la page dans une image, ou d'effectuer des tests de temps de chargement, ou de tester le fonctionnement de javascript. Pediff l'utilise lui pour récupérer une image de deux sites web : notre site en version "originale", et notre site après changements.

Une fois que nous avons ces images (dans de multiples résolutions, pour tester le responsive aussi), il va appliquer un diff dessus, pour mettre en avant les différences entre ces deux versions sans avoir à les chercher manuellement. La dernière étape est la génération d'un rapport interactif en HTML/CSS/JS.

Qu'est-ce qu'un diff ? C'est une sorte de compte rendu des changements entre deux fichiers. Cela permet par exemple de passer d'une version à une autre d'un fichier texte de manière automatisée, ou alors de rendre compte de modifications. Pour l'exemple, voilà l'affichage des diff de Github.

Pediff en images

Une fois toutes les images prises et traitées, Pediff vous les affichent de la manière suivante : une liste des pages vous est présentée, puis un rapport par page, où nous retrouvons avec un affichage des changements (en rouge) ainsi qu'un affichage des pages, et un lien pour y accéder en live. Chaque version affiche le pourcentage de ressemblance entre l'ancienne et la nouvelle version, pour permettre de détecter certains bugs d'un simple coup d'œil (des pages qui ne devraient pas être affectées doivent être semblables à 100%).

Ce rapport est généré en HTML, et peut très simplement être lu depuis son poste local ou depuis un serveur.

Installation et configuration

La mise en place de Pediff vous demandera d'installer casper.js (nécessite phantom.js et node.js) et imagemagick (très simple à installer sur tout Mac ou Linux). Une fois ces deux dépendances installées, ils ne vous restent plus qu'à télécharger le dossier et le mettre à l'endroit de votre choix.

La configuration vous demandera par contre le passage par un éditeur de texte pour définir quelles sont les pages à tester, pour quelles tailles d'écrans, et quelles sont les URLs des versions de tests et de production. Une mise en place un peu lourde mais qui ne sera à faire qu'une seule fois par site.

Pour plus d'informations sur la configuration de Pediff, je vous conseille de jeter un œil au dépôt Github.

Pediff est un outil que je trouve parfait pour les agences faisant beaucoup d'intégrations, ou qui doivent maintenir un projet sur le très long terme. Sa mise en place est particulièrement aisée si votre projet utilise Git pour son déploiement et son versionning, et s’intégrera très bien dans votre workflow.

Le seul point que l'on pourrait reprocher à Pediff (et qui en bloquera certains) est sa configuration passant uniquement par un éditeur de texte et l'écriture d'un "task file" à la min. Un système de configuration graphique en plus aurait rendu l'outil plus simple à prendre en main pour les non-développeurs.