RootsLabs

Un site doit désormais s’adapter à différents phériphériques que ce soit un terminal mobile, un ordinateur, une tablette ou un écran de télévision. La technologie dite de Responsive Design est là pour cela. Afin de tester un site aux différents points de rupture, il me fallait trouver une technique et automatiser ces tests : PhantomJS (Chrome) et SlimerJS (Firefox) sont les solutions.

PhantomJS : Installation

• Télécharger le package

$ wget https://phantomjs.googlecode.com/files/phantomjs-1.9.2-linux-x86_64.tar.bz2
--2013-09-23 19:46:15--  https://phantomjs.googlecode.com/files/phantomjs-1.9.2-linux-x86_64.tar.bz2
Résolution de phantomjs.googlecode.com (phantomjs.googlecode.com)... 173.194.66.82, 2a00:1450:400c:c03::52
Connexion vers phantomjs.googlecode.com (phantomjs.googlecode.com)|173.194.66.82|:443...connecté.
requête HTTP transmise, en attente de la réponse...200 OK
Longueur: 13279068 (13M) [application/x-bzip2]
Sauvegarde en : «phantomjs-1.9.2-linux-x86_64.tar.bz2»

100%[===========================================================================================================================================================================>] 13 279 068  1,39MB/s   ds 9,3s   

2013-09-23 19:46:25 (1,36 MB/s) - «phantomjs-1.9.2-linux-x86_64.tar.bz2» sauvegardé [13279068/13279068]

• Décompresser le package

$ tar xf phantomjs-1.9.2-linux-x86_64.tar.bz2 phantomjs-1.9.2-linux-x86_64/

• Copier le binaire vers /usr/local/bin/

$ cp phantomjs-1.9.2-linux-x86_64/bin/phantomjs /usr/local/bin/
cp: impossible de créer le fichier standard « /usr/local/bin/phantomjs »: Permission non accordée
$ sudo !!
sudo cp phantomjs-1.9.2-linux-x86_64/bin/phantomjs /usr/local/bin/
[sudo] password for franck:

• Dés lors, trois cas peuvent apparaître :
  • Cela fonctionne parfaitement bien.

    $ phantomjs phantomjs-1.9.2-linux-x86_64/examples/hello.js
    Hello, world!

  • Il manque le package freetype

    $ phantomjs phantomjs-1.9.2-linux-x86_64/examples/hello.js
    phantomjs: error while loading shared libraries: libfreetype.so.6: cannot open shared object file: No such file or directory
    
    $ sudo yum install freetype

  • Il manque le package fontconfig

    $ phantomjs phantomjs-1.9.2-linux-x86_64/examples/hello.js
    phantomjs: error while loading shared libraries: libfontconfig.so.1: cannot open shared object file: No such file or directory
    
    $sudo yum install fontconfig

PhantomJS : Script

Voici un script de base qui va vous permettre de faire un screenshot d’une site en 1024*768 et de l’exporter vers un fichier PNG.

/*
    requires: phantomjs
    usage: phantomjs screenshot.js
*/
var page = new WebPage(),
    url, filename;

if (phantom.args.length < 2) {
    console.log('Usage: screenshot.js URL filename');
    phantom.exit();
} else {
    url = phantom.args[0];
    filename = phantom.args[1];

    page.viewportSize = { width: 1024, height: 768 };

    page.open(url, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {PhantomJS
                page.render(page.viewportSize.width + 'x' + page.viewportSize.height +'_'+ filename);
                phantom.exit();
            }, 2000);
        }
    });
}

Malheureusement, on a qu’une seule taille de viewport, il en faudrait plusieurs afin de tout tester.
Modifions ce script pour gérer plusieurs viewports.

/*
    requires: phantomjs
    usage: phantomjs screenshot.js URL
*/
var sizes = [
        [320, 480],
        [320, 568],
        [600, 1024],
        [1024, 768],
        [1280, 800],
        [1440, 900]
    ],
    count, url, filename;

if (phantom.args.length < 1) {
    console.log('Usage: screenshot.js URL');
    phantom.exit();
} else {
   url = phantom.args[0];
   var filename = url.replace('http://','');
   filename = filename.replace('www.','');
   filename = filename.replace(/\./g,'_');
   filename = filename.replace(/\//g,'_');
   count = 0;
   sizes.forEach(function(vpSize){
    count++;
    var page = new WebPage();
    page.viewportSize = { width: vpSize[0], height: vpSize[1] };
    page.open(url, function (status) {
      if (status !== 'success') {
        console.log('Unable to load the address!');
      } else {

        window.setTimeout(function () {
          page.render(filename+'_'+page.viewportSize.width+ 'x' + page.viewportSize.height +'.png');
          page.close();
          count--;
          if(count == 0){
            phantom.exit();
          }
        }, 2000);
      }
    });
  });
}

PhantomJS : Exemple

Pour l’utiliser, la commande est simple :

$ phantomjs screenshot.js http://rootslabs.net/blog/

Et hop, cela vous génère vos 6 screenshots de votre site :

Il reste un souci ; PhantomJS permet le rendu sous le moteur de Chrome. Mais comment faire pour le moteur de Firefox ?
La solution s’appelle SlimerJS.

SlimerJS : Installation

• Télécharger le package https://download.slimerjs.org/releases/0.8.3/slimerjs-0.8.3.zip
• Ajouter dans votre fichier bashrc l’emplacement de Firefox via un export

  export SLIMERJSLAUNCHER=/usr/bin/firefox

• Extraire le contenu du zip
• Installer xvfb pour lancer SlimerJS en mode headless

  # yum install xorg-x11-server-Xvfb

SlimerJS : Script

Ensuite, je teste mon précédent script pour l’adapter à SlimerJS.

Je remplace

var page = new WebPage();

par

var page = require("webpage").create();

Pourquoi ? L’objet Webpage est marqué « deprecated » dans PhantomJS (Merci LaurentJ).
Le code devient ainsi fonctionnel et valide sur PhantomJS et SlimerJS.

Et j’adapte le code pour détecter le moteur utilisé :

/*
    requires: phantomjs
    usage: phantomjs screenshot.js URL
*/
var sizes = [
        [320, 480],
        [320, 568],
        [600, 1024],
        [1024, 768],
        [1280, 800],
        [1440, 900]
    ],
    count, url, filename;
if(typeof(slimer) != 'undefined'){
  var sEngine = 'slimerjs';
} else {
  var sEngine = 'phantomjs';
}
if (phantom.args.length < 1) {
    console.log('Usage: screenshot.js URL');
    phantom.exit();
} else {
   url = phantom.args[0];
   var filename = url.replace('http://','');
   filename = filename.replace('www.','');
   filename = filename.replace(/\./g,'_');
   filename = filename.replace(/\//g,'_');
   count = 0;
   sizes.forEach(function(vpSize){
    count++;
    //var page = new WebPage();
    var page = require("webpage").create();
    page.viewportSize = { width: vpSize[0], height: vpSize[1] };
    page.open(url, function (status) {
      if (status !== 'success') {
        console.log('Unable to load the address!');
      } else {

        window.setTimeout(function () {
          page.render(filename+'_'+page.viewportSize.width+ 'x' + page.viewportSize.height + '_' + sEngine +'.png');
          page.close();
          count--;
          if(count == 0){
            phantom.exit();
          }
        }, 2000);
      }
    });
  });
}

SlimerJS : Exemple

Pour l’utiliser, la commande est simple :

$ xvfb-run ./slimerjs screenshot.js http://rootslabs.net/blog/

Conclusion

Dorénavant, via les deux commandes suivantes, il vous est possible de tester votre responsive design en ligne de commande et ainsi voir les anomalies sur un navigateur ou un autre rapidement.
PhantomJS (moteur de Chrome) :

$ phantomjs screenshot.js http://rootslabs.net/blog/

SlimerJS (moteur de Firefox) :

$ xvfb-run ./slimerjs screenshot.js http://rootslabs.net/blog/