Je viens de faire joujou avec un truc que Kozlika m’a indiqué il y a quelques heures et qui produit des copies d’écran de sites responsive au p’tit poil. Responsive pour ceux qui se demandent ce que c’est je dirais que c’est un bidule
— pas la peine de détailler — qui, en fonction de l’appareil que vous utilisez, téléphone portable, tablette, ordinateur, … va positionner au mieux les différents éléments de la page. En général, ça joue sur le nombre de colonnes, les infos annexes qui sont reléguées vers le bas de la page sur petits écrans, etc.
Le truc en question s’appelle CasperJs, outil qui s’appuie sur PhantomJs, un machin qui fait semblant — mais rudement bien, hein ? On voit pas la différence ! — d’être un navigateur. CasperJs lui s’occupe de faire semblant d’être le gus qui ouvre des pages web et qui clique sur des boutons — mais rudement bien, hein ? On voit pas la différence ! Enfin, si un peu, il est plus rapide.
L’intérêt est qu’on peut comme ça scripter CasperJs pour lui faire afficher un site web — à l’aide de PhantomJs, bravo vous avez tout compris — dans une fenêtre dont on choisit les dimensions et prendre des copies d’écran au passage. Très pratique pour générer une série de copies d’écran sur différentes surfaces d’affichage.
J’ai repris toutes les informations d’installation ici, en utilisant MacPort plutôt que Brew pour PhantomJs, et en récupérant directement le binaire depuis le site pour CasperJs.
Une fois PhantomJs et CasperJs installé, il suffit d’écrire un petit script Javascript pour définir les quelques dimensions et pour gérer les captures et sauvegardes des images récupérées. Fainéant que je suis je me suis borné à reprendre celui qui était donné en exemple :
var casper = require("casper").create(), viewportSizes = [ [320,480], [320,568], [600,1024], [1024,768], [1280,800], [1440,900] ], url = casper.cli.args[0], saveDir = url.replace(/[^a-zA-Z0-9]/gi, '-').replace(/^https?-+/, ''); casper.start(); casper.each(viewportSizes, function(self, viewportSize, i) { // set two vars for the viewport height and width as we loop through each item in the viewport array var width = viewportSize[0], height = viewportSize[1]; //give some time for the page to load casper.wait(5000, function() { //set the viewport to the desired height and width this.viewport(width, height); casper.thenOpen(url, function() { this.echo('Opening at ' + width); //Set up two vars, one for the fullpage save, one for the actual viewport save var FPfilename = saveDir + '/fullpage-' + width + ".jpg"; // ".png"; var ACfilename = saveDir + '/' + width + '-' + height + ".jpg"; // + ".png"; //Capture selector captures the whole body this.captureSelector(FPfilename, 'body'); //capture snaps a defined selection of the page this.capture(ACfilename,{top: 0,left: 0,width: width, height: height}); this.echo('snapshot taken'); }); }); }); casper.run(function() { this.echo('Finished captures for ' + url).exit(); });
Vous pouvez ajouter ou enlever autant de tailles que vous voulez (voir les lignes 3 à 8). Vous pouvez également obtenir des fichiers PNG (beaucoup plus lourds d’après mes tests) en remplaçant .jpg
par .png
sur les lignes 31 et 32, ou également du GIF ou du PDF, juste en changeant l’extension.
Une fois ces réglages effectués ça se lance comme ça (mon script Javascript est enregistré sous ~/casperjs.js
) :
casperjs ~/casperjs.js http://open-time.net
Pour chacune des tailles il va alors générer une copie d’écran de la partie visible et une copie d’écran de la page complète. Voilà ce que ça donne pour le blog que vous êtes en train de lire :
Pratique !
1 De Sylvain -
Ça l’air d’être même beaucoup plus complet que de la simple capture ! Cela semble vouloir automatiser des scénarios de navigations, pratique pour de la recette, je creuserai à l’occasion.
Merci à Kozlika ;)
2 De Sylvain -
Ah mais c’est Nicolas Perriault l’auteur !! Bravo :)
3 De mickael andrieu -
Pas mal en effet ! Pourriez vous créer l’astuce au niveau du wiki de casperjs ? Elle rassemble l’ensemble des tips de ce genre lié à ce merveilleux outil.
ps: si vous utilisez la 1.1beta, vous pourrez également tester le rendu sous Firefox avec l’option —engine=slimerjs (sauf erreur, c’est documenté).
Bonne soirée
4 De Franck -
N1k0 ne m’étant pas quelqu’un d’inconnu :-) Le monde est petit Sylvain.
mickael_andrieu je n’ai (pour l’instant) que la version 1.0.0 de CasperJs, mais j’essaierai à l’occasion, merci pour l’info.
5 De Sébastien -
Très sympa comme approche et surtout très pratique avec une automatisation pour les recettes.
Merci pour cet article :)