Couverture de l'article CasperJS et Resurrectio pour automatiser ses tests
Retour aux articles

L'agence

WanadevStudio

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 :

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 !

Photo de Jocelyn Faihy auteur de l'article

Jocelyn Faihy

Commentaires

Photo de garrigos adrian auteur du commentaire

garrigos adrian

Il y a 9 ans

Un article cool comme l'est CasperJs que je découvre en ce début d'année. Merci pour cette article. 2017 commence bien car je vois de belles perspectives avec Casper. Merci :-)

Photo de Jocelyn Faihy auteur du commentaire

Jocelyn Faihy

Il y a 9 ans

Merci à toi d'avoir pris un peu de temps pour lire cet article. Bien content que ça t'ait plu et que ça te soit utile. N'hésite pas à nous suivre sur Twitter pour être au courant des articles qui sortent et bonne année !

Photo de sem auteur du commentaire

sem

Il y a 8 ans

salut, cool comme article, dis moi es que avec l'extension je peux enregistrer et copier une partie de la page régulièrement? exemple: un  blog publi souvent des articles, et je simule sur ce dernier, es possible qu'il me récuper uniquement l'article? comment faire ? merci

Merci pour ton article, mais un souci Bonjour, Depuis des mois je suis en train de galérer sur le déploiement d’un code, et aujourd’hui j’ai voulu vous en faire part pour avoir d’éventuelle solution! Je vous explique : En fait c’est code que j’ai écrit pour aller sur un site précis et effectuer une action précise. Ce code je lai réalisé avec CasperJS (qui sert surtout à simuler l’action d’un homme, et qui prend appui sur nodeJs , Phantom JS). Mon problème c’est que je désire exécuter ce code chaque heure à l’infini. Pour cela il faut que je l’héberge sur un serveur en ligne (sur lequel ? je sais pas!) et vu aussi que pour l’exécuter j’utilise l’invite de commande je ne sais vraiment pas comment le déployer sur un serveur et l’exécuter à chaque 1 heure. je vous rappel que je suis pas très bon en code mais c’est sur un Tuto de @boristchangang que je me suis basé pour faire mon script : https://medium.com/@boristchangang/scrapper-linkedin-avec-casperjs-pour-les-nuls-e962812734a6. Cela me ferait grand plaisir si vous m’aidez à trouver la solution à mon problème MERCI
  • Couverture de l'article Retour sur le Meet-up Python du 30 juin 2025
    Retour sur le Meet-up Python du 30 juin 2025

    Il y a 5 jours

    Ce lundi 30 juin 2025 nous accueillions la branche lyonnaise de l'AFPy dans nos locaux pour un meetup autour du langage Python. Malgré les fortes températures, une trentaine de personnes ont répondu présentes pour ce moment de convivialité et d'échange.

  • Couverture de l'article Figma Make : enfin une passerelle prometteuse entre design et code grâce à l'IA
    Figma Make : enfin une passerelle prometteuse entre design et code grâce à l'IA

    Il y a 3 semaines

    Depuis quelques années, les outils d'IA pour générer des intégrations d'interfaces à partir de maquettes fleurissent. On en a testé plusieurs chez WanadevDigital : de Locofy à Uizard, en passant par Framer AI. Tous ont leurs qualités, mais jusqu’ici, il manquait un vrai pont stable entre les intentions du designer et la réalité du code front.

    L’arrivée de Figma Make change la donne. Et si je devais résumer son impact en une phrase : ça fonctionne, et ça fonctionne pour tout le monde, designers, développeurs et intégrateurs !

  • Couverture de l'article Maîtriser la traduction (i18n) dans un projet web - Partie 2 : Conseils pour une localisation gérable et évolutive
    Maîtriser la traduction (i18n) dans un projet web - Partie 2 : Conseils pour une localisation gérable et évolutive

    Il y a 4 mois

    Dans la partie 1, nous nous sommes concentrés sur la mise en place d'une base solide pour la gestion des traductions dans un projet Vue. Maintenant que votre système de traduction est opérationnel, il est temps d'examiner de plus près comment structurer, gérer et faire évoluer vos fichiers de traduction de manière efficace.

    Cette partie couvrira les bonnes pratiques que nous utilisons chez Wanadev pour créer des clés de traduction maintenables, éviter les pièges courants et garantir que vos fichiers de traduction restent propres et évolutifs au fur et à mesure que votre projet grandit.

  • Couverture de l'article Maîtriser la traduction (i18n) dans un projet web - Partie 1 : Configurer proprement
    Maîtriser la traduction (i18n) dans un projet web - Partie 1 : Configurer proprement

    Il y a 4 mois

    Mettre en place l'internationalisation (i18n) dans un projet web peut sembler simple. Cependant, de nombreux projets se retrouvent avec des configurations de traduction mal gérées, difficiles à maintenir ou à faire évoluer à mesure que l'application grandit. Une stratégie i18n robuste est essentielle pour offrir une expérience utilisateur fluide dans plusieurs langues.

    Je vous décris ici, les pratiques que nous avons établies chez Wanadev au fil des années d'expérience pour mettre en œuvre et gérer les traductions dans les projets Vue. Bien que les exemples soient spécifiques à Vue, la plupart de ces pratiques peuvent être appliquées à n'importe quel framework.

  • Couverture de l'article Bien choisir sa typographie : quelques bases pour un message clair
    Bien choisir sa typographie : quelques bases pour un message clair
    Méthodologie

    Il y a 9 mois

    On n'écrit pas "Je t'aime" comme "Je te hais" ! Cette petite phrase résume bien ma problématique : quand on doit délivrer un message, la compréhension de ce dernier ne se fait pas uniquement par la lecture simple du texte, mais aussi par sa mise en forme. Et de cette mise en forme dépend la bonne compréhension du message. Dans cet article, nous allons nous pencher sur l’histoire et les familles de typographies dans le but de sensibiliser sur l’importance des choix de typographies dans la communication. Nous verrons ensuite quelques astuces pour bien sélectionner sa typographie et mettre en forme son message.

  • Couverture de l'article Les solutions CPQ sont-elles accessibles à toutes les entreprises ?
    Les solutions CPQ sont-elles accessibles à toutes les entreprises ?
    Méthodologie

    Il y a 9 mois

    Le CPQ (Configure, Price, Quote) est un outil essentiel pour les entreprises cherchant à optimiser leurs processus de vente. Il permet aux équipes commerciales de configurer rapidement et facilement des produits ou services complexes en fonction des besoins spécifiques des clients, tout en garantissant la cohérence des prix. Grâce au CPQ, les vendeurs peuvent établir des devis précis et personnalisés en temps réel, tout en tenant compte des remises, des promotions ou des ajustements spécifiques. Aujourd'hui les CPQ tirent majoritairement parti de la 3D pour proposer une visualisation de produit plus réaliste et complète.