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.

 

Curl: Tester le temps de réponse d’une page

Curl possède une option qui permet d’afficher le temps total passé à récupérer une url via l’option « -w » qui permet d’indiquer à curl d’afficher un certain nombre d’informations.

Exemple pour afficher le temps total d’une requête :

curl -s-o /dev/null -w "%{time_total}\n" http://fr.charles.lescampeurs.org
0,169
  • -s permet de ne pas afficher la barre de progression et les messages d’erreur
  • -o /dev/null redirige le contenu de la requête vers un trou noir
  • enfin -w « %{time_total}\n » est l’information que l’on veut afficher

Le temps d’exécution est affiché en secondes et milli-secondes.

D’autres options intéressantes sont disponibles comme le temps de connection ou le temps pour recevoir le 1er octet.

curl -s -o /dev/null -w "Connect: %{time_connect} TTFB: %{time_starttransfer} Total time: %{time_total}\n" http://fr.charles.lescampeurs.org
######################################################################## 100.0%
Connect: 0,004 TTFB: 0,171 Total time: 0,171