Phantomjs : faire un screenshot d’un site en https

J’utilise phantomjs pour faire des captures d’écran régulièrement de pages d’un site pour voir l’évolution de la page ou tout simplement créer des archives sans avoir à y penser.

screenshots avec phantomjs en javascript

Phantomjs permet de manipuler en javascript le moteur de rendu webkit afin de simuler un navigateur en ligne de commande.

Problème de rendu avec phantomjs et le https

En prenant des screenshots de notre site de coaching,  je me suis aperçu que les fichiers png générés étaient vides.

Après investigation, il s’avère que par défaut, phantomjs peut avoir des problèmes avec les sites en https.

Pour résoudre la situation, il faut utiliser le switch –ssl-protocol=any ou –ssl-protocol=TLSv1. Par défaut phantomjs utilise SSLv3 qui ne fonctionne pas dans mon cas.

phantomjs --ssl-protocol=any fitnext.js

Script pour faire le rendu phantomjs

Le javascript final qui permet de faire le screenshot ressemble à ceci :

var page = new WebPage();
page.settings.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.65 Safari/537.36';
page.viewportSize = { width: 1280, height: 800 };
page.open('https://www.fitnext.com', function (status) {
    var now = new Date();
    var month = now.getMonth()+1; if (month < 10) month = '0'+month;
    var day = now.getDate(); if (day < 10) day = '0'+day;
    var filename = 'homepage/' + now.getFullYear() +'-'+month+'-'+day+ '_homepage_fitnext.png';
    page.render(filename);
    phantom.exit();
});

Dans ce script, j’utilise les fonctions javascript de date pour créer un nom de fichier qui correspond à la date du jour.

Ici, le nom de fichier de la capture effectuée par phantomjs ressemblera à : 2016-02-20_homepage_fitnext.png

Automatisation des captures d’écran phantomjs

Pour prendre des screenshots quotidiens de la homepage, je configure une tâche cron pour cela :

40 12 * * *     cd /chemin/de/votre/script && phantomjs --ssl-protocol=tlsv1 fitnext.js > /dev/null

Je redirige la sortie standard vers /dev/null pour ne pas recevoir d’email contenant les erreurs javascript de la console.