RootsLabs

More than a tool ! GitHub Google+ LinkedIn RSS

Créer une miniature d’un site web adaptatif via PhantomJS et SlimerJS

Progi1984 - Commentaires (4)

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

  • Décompresser le package

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

  • Dés lors, trois cas peuvent apparaître :
    • Cela fonctionne parfaitement bien.
    • Il manque le package freetype
    • Il manque le package 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.

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.

PhantomJS : Exemple

Pour l’utiliser, la commande est simple :

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

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
  • Extraire le contenu du zip
  • Installer xvfb pour lancer SlimerJS en mode headless

SlimerJS : Script

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

Je remplace

par

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é :

SlimerJS : Exemple

Pour l’utiliser, la commande est simple :

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) :

SlimerJS (moteur de Firefox) :

Commentaires

1. i M@N, le 30 septembre 2013 à 13:18

Bravo, excellent article.
Je viens de tester ça fonctionne super bien.
Merci beaucoup ça va m’être très utile. : )

2. Laurentj, le 2 octobre 2013 à 12:06

Ceci:

ça fonctionne dans PhantomJS, et c’est même la façon de faire recommandée. l’objet Webpage est marqué « deprecated » dans PhantomJS 😉

3. Progi1984, le 2 octobre 2013 à 12:29

@LaurentJ : Merci de ta contribution. J’ai mis à jour l’article pour préciser ce point.

4. Benjamin, le 8 octobre 2013 à 17:48

Bonjour,

Si le site est en HTTPS le script ne fonctionne pas à moins de modifier le code dans les sources :

var filename = url.replace(‘http://’, »);
par
var filename = url.replace(‘https://’, »);

Ajouter un commentaire

Commentaire :