Retour

PhantomJS

16 juil. 2014
7mn

PhantomJS est un navigateur webkit en ligne de commande. Il vous permet entre autres :

  • de faire des captures écran au format PDF, PNG ou JPEG
  • de récupérer des pages web via leurs urls et de les manipuler
  • d’exécuter des tests JavaScript
  • d'envoyer des requêtes sur un serveur distant
  • de faire du monitoring de page web
  • de manipuler le DOM
  • etc

Je vous laisse la curiosité de survoler la documentation qui est assez complète et plutôt bien faite. Au pire la communauté est plutôt active et répondra à la plupart de vos questions.

I Installation

Les exemples que je vais détailler dans cet article seront faits sous ubuntu 14.04.

Pour installer PhantomJS, rien de compliqué, rendez-vous sur le site officiel.

Deux possibilités s'offrent à vous, la 1ère (et celle que j'ai choisie) est de télécharger un zip, vous le décompressez et c'est gagné.

La 2ème est de compiler Phantom vous-même. Ce n'est pas plus compliqué que la 1ère méthode, c'est juste plus long.

II Capture

Exemple 1

Phantomjs supporte trois formats d'export: PNG, JPEG et PDF.

Commencez par créer un fichier javascript que j’appellerai phantomjs.js et mettez-y le code suivant :

var page = require('webpage').create(), system = require('system'), address, output, size; address = system.args[1]; output = system.args[2]; console.log(address, output) page.open(address, function(status) { if (status !== 'success') { console.log('Unable to load the address!'); phantom.exit(); } else { page.render(output + '/phantomjs.png'); phantom.exit(); } });

Ceci est un exemple très simpliste car PhantomJS possède tout un tas d'options.

La première ligne est essentielle comme vous pouvez l'imaginer car elle permet de récupérer le mode rendu de page web.

La deuxième vous permet de récupérer les arguments renseignés en ligne de commande via le module System. Ce dernier vous permet également d'afficher les variables d'environnement, les informations de l'OS, le PID de PhantomJS.

On récupère donc l'url de la page web ainsi que le dossier de destination lors de la création du pdf. Je les récupère à l'index 1 et 2 en suivant l'ordre dans lequel j'ai tapé ma commande (cf plus bas sur l'exemple de la commande).

Ensuite, on ouvre la page web et si elle a bien répondu,on fait alors le rendu de la page et on sort du script.

Vous remarquez que j'ai précisé l'extension ".png" du fichier afin d'avoir une image. Il vous suffit de mettre ".pdf" ou ".jpeg" pour changer le format en fonction de vos besoins.

Enfin la commande à taper dans le shell :

path/to/phantomjs phantomjs.js 'url' 'yourfolder'

Pour faire le rendu du site de PhantomJS par exemple, vous taperez:

path/to/phantomjs phantomjs.js 'http://phantomjs.org/' 'yourfolder'

Si des erreurs existent sur la page, il est possible que celles-ci s'affichent dans votre console.

Exemple 2

Voici un second exemple pour faire un rendu d'une partie de la page. Ici je crée une image de l'icône de PhantomJS présent sur leur site.

var page = require('webpage').create(), system = require('system'), address, output, size; address = system.args[1]; output = system.args[2]; page.open(address, function(status) { if (status !== 'success') { console.log('Unable to load the address!'); phantom.exit(); } else { page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function() { var icone = page.evaluate(function() { return $('img[alt="PhantomJS"]')[0].getBoundingClientRect(); }); page.clipRect = { top: icone.top, left: icone.left, width: icone.width, height: icone.height }; page.render(output + '/phantomjs.png'); phantom.exit(); }); } });

Vous remarquerez l'utilisation de la méthode includeJs() . Cette dernière vous permet d'inclure des librairies javascript (tel que jQuery dans cet exemple) afin de pouvoir les utiliser sur la page que vous évaluez.

Cependant, si la librairie est déjà présente, il est inutile de l'inclure une deuxième fois.

Ensuite, la propriété clipRect nous permet de préciser la zone à retourner et le tour est joué. Retapez la commande précédente et l'image devrait apparaître.

Vous voyez également via cet exemple qu'il vous est possible de manipuler le DOM (supprimer, modifier, rajouter des éléments) à votre guise avant de faire le rendu.

III Exécuter des tests

PhantomJS peut également être utilisé pour exécuter des tests JavaScript. Parmi tous les exemples fournis sur leur GitHub officiel, vous trouverez des scripts afin d’exécuter des tests QUnit et Jasmine.

Voici un exemple avec QUnit:

test.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <script src="jquery-2.1.1.js"></script> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <script src="qunit-1.14.0.js"></script> <script src="test.js"></script> </body> </html>

test.js

QUnit.test( "hello test", function( assert ) { assert.ok( 1 == "1", "Passed!" ); });

Et enfin, téléchargez le fichier run-qunit.js et lancez la commande:

path/to/phantomjs run-qunit.js page.html

Vous devriez voir les lignes suivantes:

'waitFor()' finished in 200ms.
Tests completed in 15 milliseconds.
1 assertions of 1 passed, 0 failed.

Vous trouverez d'autres scripts tels que run-qunit.js à cette adresse.

IV Conclusion

PhantomJS est un outil très puissant et bien documenté. Donc, si vous avez besoin de générer des pdfs et/ou des images et que votre site contient beaucoup de javascript, PhantomJS peut devenir votre allié.

Mais ce n'est là qu'un aperçu de ses possibilités, je vous encourage à faire un tour sur leur site, cela peut vous donner des idées.


Articles sur le même thème

Comment créer de la dette technique dès le début d’un nouveau projet ?

Quand on arrive sur un projet existant, on doit souvent subir une dette technique qui nous fait perdre du temps et qui nous rend fou au point de vérifier qui a fait le code. Vous aussi vous voulez entrer dans la postérité lors d’un git blame et mal concevoir votre produit ?

9 août 202310mnMarianne Joseph-Géhannin

Maîtriser le temps lors du débogage grâce aux points d’arrêt

On ne va pas se mentir, la journée type d’un développeur est rythmée par des cafés et des “ça marche pô”. Et si le dev en question a choisi JS comme langage de programmation, ou de scripting si vous préférez, et bien, ça n'arrange pas les choses. Mais alors que faire quand “ça marche pô” ?

10 mai 202310mnGiuseppe Cunsolo

Découvrez Eleven Labs

Notre site pour mieux nous connaître

J'y vais

Contact

Eleven Labs - Paris

102, rue du Faubourg Saint Honoré

75008 Paris

Eleven Labs - Nantes

42, rue la Tour d'Auvergne

44200 Nantes

Eleven Labs - Montréal

1155, Metcalfe St Suite 1500

Montréal, QC H3B 2V6, Canada

business@eleven-labs.com

01.82.83.11.75