NightmareJS est une bibliothèque JavaScript disponible pour Node.js permettant de parcourir le DOM d'une page Web dans le but d'interagir avec ses éléments. On pourrait ainsi utiliser NightmareJS pour faire des tests sur le bon fonctionnement de telle ou telle page d'un site.

Pour vous l'expliquer par un exemple, avec NightmareJS, on va pouvoir se rendre sur une page d'un site, positionner le curseur dans un champ de formulaire, le renseigner puis valider le formulaire. Le tout en JavaScript ! On peut aussi faire une capture d'écran de la page que l'on souhaite très simplement !

Dans cet article, nous allons voir comment utiliser NightmareJS, dans différents cas d'utilisation.

Prérequis et installation

Bien entendu, vous devez avoir Node.js installé sur votre PC. Si ce n'est pas le cas, rendez-vous sur le site officiel, puis téléchargez et installez le logiciel.

Pour tester NightmareJS, créez un dossier dans votre environnement de travail, puis ouvrez une invite de commande ou un terminal.

Ensuite, il vous faut installer le paquet NPM correspondant à NightmareJS. Voici la commande adéquate à inscrire dans votre terminal :

npm install --save nightmare

Exemple 1 : afficher une page et faire un screenshot

On va commencer par créer un fichier app.js dans notre dossier du projet. A l'intérieur, mettez ce code :

// On charge NightmareJS
var Nightmare = require('nightmare');

var fetch = new Nightmare()
    .viewport(1600, 1200)
    .goto("http://blog.shevarezo.fr")
    .wait()
    .screenshot('screen.png')
    .run(function(){ console.log('Done!'); });

Ce script est assez simple : on défini la fenêtre du navigateur à 1600x1200px, puis on se rend sur le blog que vous être en train de lire. On attend que la page se charge pour prendre une capture d'écran du résultat !
Par défaut, le temps d'attente de la méthode wait() est de 1000 ms. Vous pouvez le changer en modifiant le paramètre waitTimeout de Nightmare (voir la doc).

Pour exécuter le script, lancez cette commande dans votre terminal :

node app.js

On peut "perfectionner" ce bout de code en mettant en paramètre du script l'URL à screenshoter :

var Nightmare = require('nightmare');

if (process.argv.length < 3) {
    console.log('Usage: node app.js URL');
    return;
}

var url = process.argv[2];

var fetch = new Nightmare()
    .viewport(1600, 1200)
    .goto(url)
    .wait()
    .screenshot('screen.png')
    .run(function(){ console.log('Done!'); });

Ainsi, le script se lancera comme ceci :

node app.js http://blog.shevarezo.fr

Exemple 2 : lancer une recherche sur Wikipedia

Dans le premier exemple, on s'est rendu sur une page Web et on a pris une capture d'écran de celle-ci. Ici, nous allons nous rendre sur Wikipedia.org, puis renseigner le champ de recherche et faire une capture d'écran des résultats de recherche.

var Nightmare = require('nightmare');

if (process.argv.length < 3) {
    console.log('Usage: node wiki.js SEARCH_TERM');
    return;
}

var fetch = new Nightmare()
    .viewport(1600, 1200)
    .goto("https://fr.wikipedia.org/")
    .type('#simpleSearch input[name="search"]', process.argv[2])
    .click('input[name="go"]')
    .wait(3000)
    .screenshot('screen.png')
    .run(function(){ console.log('Done!'); });

La méthode type() permet de renseigner un champ accessible via son DOM. La méthode click() permet de cliquer sur un élément (lien, bouton, ...).

Au lieu de faire un screenshot, on peut exporter un PDF avec la méthode pdf().

On lance le script comme ceci :

node wiki.js javascript

D'autres méthodes utiles

title() : retourne le nom de la page
back() : va à la page précédente
forward() : va à la page suivante
refresh() : actualise la page
select() : ouvre une liste déroulante pour choisir une option
scrollTo() : descend sur un élément

Bien sûr, la documentation est bien fournie en détails et exemples.

Conclusion

Ce tour d'horizon de NightmareJS vous permettra peut-être d'utiliser ce script pour votre projet. Vous pouvez par exemple simuler la mise au panier d'un produit, en prenant des captures d'écran à chaque étape.

Sachez que dans cet article, l'auteur utilise NightmareJS pour faire des tests en lien avec Mocha et Chai.