Pourquoi utiliser Zeno pixel ?

Lorsque nous développons de nouvelles fonctionnalités pour notre site web LesFurets.com, il arrive que des effets de bords viennent dégrader le rendu graphique du site. Ces régressions visuelles sont difficilement détectable par des tests, qu’ils soient unitaires ou d’intégrations.

Ces effets de bords peuvent être causés de différentes manières :

  • modification d’une classe CSS utilisée sur plusieurs pages
  • modification de la réponse d’un webservice
  • modification d’un script JS
  • n’importe quel développement en fait

Pour toutes ces raisons, il nous a paru nécessaire de concevoir Zeno pixel, un outil capable de détecter ces régressions. Son principe est simple, il se charge de prendre des captures d’écran de nos pages et de les comparer avec une version précédente ou une version d’un autre environnement. L’application tourne sur NodeJS et utilise PhantomJS ou SlimerJS, ce qui lui permet de simuler le comportement d’un navigateur web sur ordinateur, tablette ou smartphone.

Zeno pixel différences

La différence est affichée en pourcentage et mise en exergue par des pixels violet. Par défaut le client web Zeno pixel n’affiche que les pages en erreurs sans les miniatures des captures d’écran. Mais l’interface propose d’afficher aussi les pages sans différences ainsi que toutes les miniatures des pages.

Zeno pixel - différence homepage

Zeno pixel - différences KO

Utilisation avec plusieurs environnements

L’utilisation faite par LesFurets.com consiste a définir dans Zeno pixel notre environnement de production et celui de pré-production et de les comparer deux à deux lors d’un déploiement. Ainsi nous vérifions qu’il n’y a pas de régressions visuelles sur l’environnement de pré-production avant de donner le feu vert à la mise en production.

Utilisation avec un seul environnement

Zeno pixel permet aussi de comparer un environnement avec sa version précédente (avec la variable de configuration offset expliquée plus bas). Nous disposons ainsi d’un moyen de vérifier quand a été introduit un changement visuel pour des applications ne disposant que d’un seul environnement.

Prise en main

Zeno pixel est composé :

  • d’un serveur écrit en JavaScript et servi par NodeJS pour :
    • prendre des captures d’écran
    • comparer les captures entre elles
  • d’un client web écrit lui aussi en JavaScript/CoffeeScript avec le framework AngularJs pour :
    • permettre de lancer la prise de capture d’écran sur un environnement ou sur une url donnée
    • lancer une comparaison entre une URL et sa version précédente ou entre deux environnements
    • configurer l’outil vérifier la liste des URLs
    • filtrer les résultats

Installation

Installer NodeJS :

Linux    : sudo apt-get install node
Mac Os X : brew install node

Toutes les dépendances se retrouvent dans le fichier package.json, il suffit ainsi de les installer avec npm :

npm install

Une fois l’installation réussie vous pouvez lancer le serveur avec la commande :

node zenoServer.js

Par défaut le serveur écoute sur le port 1337. Il vous suffit donc de lancer un navigateur web à l’adresse http://127.0.0.1:1337 pour afficher l’interface graphique.

Configuration

Fichier de configuration des URLs

Pour définir les pages que Zeno pixel doit capturer il vous suffit d’écrire un fichier JSON avec une structure particulière. Un fichier page_template.json est fourni dans le projet comme exemple. Par défaut le fichier utilisé par Zeno pixel est pages.json pour changer le nom de celui-ci il suffit de le préciser en ligne de commande avec le paramètre --file. Il doit disposer d’une configuration avec les clés :

{
	"host": "{$alias}example.com",
	"envs": [{
		"alias": "dev",
		"server": "myserver1.",
		"port": ":1234",
		"alternative": ["myserver2-"]
	}, {
		"alias": "prod",
		"server": ""
	}, {
		"alias": "previous prod",
		"server": "",
		"offset": -1
	}],
	"desktop": [{
		"url": "$host",
		"name": "homepage"
	}, {
		"url": "$host/auto",
		"name": "auto"
	}, {
		"url": "$host/search",
		"name": "search",
		"alternative": 0
	}],
	"mobile": {},
	"tablet": {}
}
  • host : le domaine, pour utiliser une variable d’environnement utilisez {$alias}
  • envs : une liste d’environnement, pour chacun il vous faut spécifier :
    • alias : le nom affiché pour chaque environnement (obligatoire)
    • server : sous-domaine suffixé d’un . (obligatoire)
    • port : si le port est différent de 80 ou 443 préfixé de :
    • offset : entier négatif correspondant à la - n-ieme version de l’environnement, -1 pour l’avant dernière, -2 pour l’antépénultième etc.
    • alternative : contient les sous-domaines alternatifs
  • desktop, tablet, mobile avec pour valeur une liste de pages. Pour chaque page, il vous faut spécifier :
    • url : URL de la page (utilisez la variable $host)
    • name : nom du fichier sauvegardé sur le disque
    • cookies : liste des cookies à utiliser lors de la capture d’écran (cf ci-dessous)

Cookies

Il est possible de préciser à Zeno pixel quels cookies sont nécessaires à la capture d’écran de certaines pages. Pour préciser la valeur des cookies il vous suffit de créer le fichier JSON suivant :

{
	"cookie1" : {
	    "name": "my_cookie",
	    "value": "my_value",
	    "domain": "www.lesfurets.com",
	    "path": "/"
	},
	"cookie2" : {...}
}

Raccourci clavier

  • E : fait apparaitre ou disparaitre la miniature des captures d’écran dans l’écran de comparaison
  • T : permet de revenir en haut de l’écran

Processus de mise en production

Dans le cadre de nos mises en production nous avons un Zeno pixel installé sur un serveur distant. Ainsi, à chaque déploiement, nous demandons à Zeno pixel de faire des captures d’écran d’un environnement en particulier et de le comparer avec un autre. Cela peut être fait avec le client dans l’interface utilisateur mais il est surtout possible de le déclencher à l’aide d’une URL. Ainsi dans notre processus de déploiement nous déclenchons à l’aide d’une commande :

curl -s http://zeno-url.com/update/${env}${/version}

La variable ${env} correspond au nom de l’environnement. Il est possible aussi de passer en dernier paramètre d’URL la version ${/version} pour la retrouver dans l’historique par la suite.

Historique des modifications

Il est aussi possible de retrouver un historique de toutes les captures d’écran des pages dans Zeno pixel. Il est ainsi possible d’avoir des captures d’écran de vos URL d’une version et de les télécharger au format PDF.