Simulation de navigateur web pour les tests de non régression graphique

Cette technologie est basée sur CasperJS, qui elle-même se base sur PhantomJS : un navigateur web qui peut être utilisé au sein d'un script automatique. Sa prise en main et son installation est complexe et nécessite d'avoir des connaissances en développement, ce n'est pas un outil tout public. Une fois installé et configuré PhantomCSS peut être utilisé, toujours via du développement, pour générer les screenshots témoins qui serviront de référence.

Il est possible de générer puis de comparer des screenshots de pages entières ou bien d'un composant (par exemple le header de la page). On notera donc une limite (logique) qui est que les pages testées doivent rester figées en terme de contenu. En effet si la base de test qui sert de référence voit ses contenus changer, la validation sera alors forcément faussée par rapport aux captures d'écran qui elles n'auront pas été modifiées.

Une bonne approche sera donc d'écrire les tests de validation plutôt par composant et de créer, sur une base dédiée aux tests, quelques contenus représentatifs qui permettront de vérifier que l'agencement des composants et donc la page dans son ensemble reste correcte. Pour aller plus loin, et c'est là que PhantomCSS prend tout son intérêt, il conviendra d'intégrer ces scripts dans un outil de tests automatisés (à l'aide de Jenkins ou Travis par exemple).

Chaque nouvelle release du projet bénéficiera alors d'une validation graphique automatique. De manière générale, les outils de test de non régression graphique sont vieillissants et peu user friendly. PhantomCSS n'échappe à la règle et on constatera d'ailleurs qu'il n'est plus maintenu depuis 2018. Il reste toutefois efficace et réalise le travail attendu tout en étant gratuit, c'est donc un outil qui reste à considérer aujourd'hui et jusqu'à ce qu'un remplaçant plus moderne émerge.