CasperJS et Resurrectio pour automatiser ses tests

Voici un petit tutoriel pour vous permettre d'automatiser vos tests facilement grâce à CasperJS et une extension Google Chrome nommée Resurrectio.

Les tests de bon fonctionnement d'un site sont très chronophages mais n'en restent pas moins indispensables. A chaque mise à jour, il est impératif de vérifier que, à minima, toutes les fonctionnalités vitales d'une plateforme soient fonctionnelles, qu'aucune régression (par exemple) n'ait été causée.

Dans cet article je vais vous montrer comment installer CasperJS puis Resurrectio ainsi que leur utilisation basique. Ces deux outils permettent de mettre en place des processus de tests simples afin de s'assurer un minimum du bon fonctionnement d'un site internet.

CasperJS

Un petit mot sur CasperJS

CasperJS est outil open source écrit en JavaScript, et utilise PhantomJS et SlimerJS. Il permet de définir des scénarios de navigation afin de tester différentes fonctionnalités sur un site comme l'inscription, l'ajout d'un article ou la présence d'un type de balise sur une page web. CasperJS sait compléter un formulaire et envoyer les données.

Installation

Si npm n'est pas sur votre machine, je vous laisse l'installer via les commandes :

sudo apt-get update sudo apt-get install nodejs npm

Ensuite il faut installer PhantomJS, pour cela :

npm install phantomjs

Puis, installez CasperJS grâce aux commandes suivantes :

npm install casperjs

Et voilà l'installation est terminée. Simple, non ?

Utilisation basique

Voici le script minimum d'un test Casper, il permet tout simplement d'aller vérifier le titre de la page www.google.fr.

var casper = new require("casper").Casper();
casper.start('http://www.google.fr/');
casper.then(function() {
    casper.echo('Title : ' + casper.getTitle());
});
casper.run();

Vous pouvez ensuite exécuter la commande suivante à l'endroit où test.js se situe.

casperjs test test.js

Celle-ci vous renvoie :

Test file: test.js
Title : Google

Un article plus approfondi suivra et proposera une organisation possible de ces tests.

Resurrectio

Resurrectio est une extension pour le navigateur Google Chrome qui permet d'automatiser des tests. Les objectifs étant les mêmes que pour CasperJS. Plus précisément, Resurrectio permet d'écrire à votre place des scripts CasperJS (vu plus haut) en enregistrant les scénarios que vous faites sur votre navigateur web. Par exemple : vous effectuez une inscription sur votre site. Resurrectio enregistre les différentes actions pour les reproduire plus tard afin de s'assurer que le processus fonctionne toujours. Pratique !

Pour débuter, rendez-vous sur la page de Resurrectio sur le Chrome Store et installez l'extension. Ensuite, activez-la, si ce n'est pas déjà fait. Une petite icône apparaît sur le haut à droite de votre navigateur, cliquez dessus, une petite fenêtre apparaît.

Pour débuter l'enregistrement d'un processus, entrez l'URL de la page que vous souhaitez tester et cliquez sur "Go". Resurrectio va recharger la page et commencer à enregistrer les actions que vous faites. Formulaires, liens... Naviguez tel un internaute lambda. Commencez avec des navigations simples pour prendre en main l'extension Resurrectio. Petite astuce : pendant votre scénario, plusieurs actions s'offrent à vous grâce au clic droit selon l'élément sur lequel vous agissez.

Au clic droit, vous pouvez demander à CasperJS de faire une capture d'écran de votre page en cours. Aussi, sur un champ de formulaire, vous pouvez tester une valeur et intercepter s’il est bloqué ou non. Vous pouvez de même tester la présence d'un texte en le sélectionnant. Très pratique pour toujours vérifier qu'un titre de page est bien présent, par exemple.

Lorsque votre scénario est terminé, re-cliquez sur l'icône de Resurrectio puis "Stop Recording". Votre scénario est prêt à être répété par Resurrectio !

Là, plusieurs choix s'offrent à vous selon le type de test que vous être en train de faire :

• Export CasperJS : qui vous permet de jeter un coup d’œil au script créé
• Export CasperJS with (x, y) coords : scénario enregistré avec les coordonnées de la souris

Resurrectio vous permet aussi d'utiliser Casperbox, un petit utilitaire permettant de tester directement sur le web vos scénarios.  Pour cela, exportez votre scénario CasperJS et cliquez sur le bouton "Run it on CasperBox".

Astuce : des rapports de tests sont accessibles à la suite des processus de scénarios : vos clients apprécieront et se sentiront rassurés en étant transparents sur vos méthodes de tests.

Quelques petits liens utiles :

• CasperJS : Git, Documentation
• PhantomJS : Git, Documentation
• Resurrectio : Git, Chrome Store

Ces exemples d'utilisations sont les plus simples possibles. Vous pouvez complexifier considérablement vos tests en multipliant les tâches et les processus. A terme, CasperJS et Resurrectio vous permettront d'avoir des tests fonctionnels relativement rapidement et simplement.

Un article plus détaillé arrivera prochainement avec des exemples plus concrets sur l'utilisation de ces scripts de tests. En attendant, je serais ravi d'échanger avec vous sur vos habitudes de tests ou par rapport à votre utilisation de CasperJS !