Share
Capturer des captures d’écran est agaçant, mais la plupart du temps, c’est nécessaire et c’est généralement vous, le développeur, qui devez le faire. Faire quelques captures d'écran n'est pas si mal, mais disons par exemple que vous travaillez maintenant sur un site Web en utilisant Responsive Web Design et que vous devez prendre cinq fois plus de captures d'écran dans différentes fenêtres. Cette tâche ennuyante d'une durée de deux secondes a maintenant commencé.
Aujourd'hui, je vais écrire un script simple et rapide pour prendre des captures d'écran de n'importe quel site dans différentes fenêtres et pour sauvegarder les images sur un disque. C'est quelque chose que j'ai vu pour la première fois sur mediaqueri.es et que j'ai commencé à l'implémenter dans mon processus de construction. Ce n'est pas idéal pour de vrais tests, car il s'agit plutôt d'un test de cohérence et offre une bonne vue d'ensemble de tout ce sur quoi je pourrais travailler avec Responsive Web..
Quand une compilation est exécutée, un petit script utilisant PhantomJS et CasperJS peut aller prendre une capture d'écran dans différentes fenêtres que j'ai définies et me donner un aperçu rapide de la page souhaitée. C’est particulièrement intéressant lorsque vous travaillez au sein d’une équipe plus large et que vous n’avez peut-être pas le temps, avant chaque construction, de vérifier chaque page et chaque module pour en déterminer la résolution. Cela vous donnera également quelque chose à montrer éventuellement au client à intervalles réguliers, pour montrer comment son site s'adapte aux différentes fenêtres.
Remarque: PhantomJS est un navigateur WebKit sans tête. Toute restitution utilise le rendu WebKit. Il ne s'agit donc pas d'une représentation réelle du rendu du site sur différents périphériques pouvant exécuter différents navigateurs et pendant que vous pouvez modifier la chaîne d'agent d'utilisateur envoyée à. le site en charge, cela ne change pas le moteur de rendu.
PhantomJS possède une excellente API JavaScript conçue pour les tests. Pour une excellente introduction à PhantomJS et son utilisation à des fins de test, vous trouverez un tutoriel ici sur les nettuts. Assurez-vous de consulter le site officiel et la documentation..
CasperJS est une boîte à outils qui repose sur PhantomJS et facilite le processus d'écriture de scripts Phantom en fournissant des fonctions, des méthodes et du sucre syntaxique..
Phantom est peut-être déjà installé, en particulier si vous testez déjà votre code côté client, sinon, c'est assez simple et vous pouvez obtenir des instructions plus détaillées sur le site officiel.
Pour les utilisateurs Windows, il existe un exécutable à télécharger et à exécuter.
Pour les utilisateurs de Mac, il existe à la fois le binaire ou vous pouvez installer à l'aide de Homebrew:
mise à jour de brew && brew installer phantomjs
Pour les utilisateurs de Linux, il existe un binaire 64 bits ou vous avez la possibilité de compiler PhantomJS à partir du code source..
Une fois installé, vous pouvez ouvrir un terminal et vérifier que tout va bien en lançant:
phantomjs --version
qui devrait retourner:
1.8.0
Une fois que Phantom est installé, vous pouvez également installer CasperJS. Pour les utilisateurs de Mac, vous pouvez à nouveau utiliser Homebrew:
brasser installer casperjs
Pour les utilisateurs Windows, vous devez ajouter votre CHEMIN déposer avec "; C: \ casperjs \ batchbin" (Modifiez ce chemin en fonction de l'emplacement où vous souhaitez stocker CasperJS). Dans le batchbin répertoire, il existe un fichier de commandes appelé casperjs.bat, ce sera le script qui exécutera vos scripts Casper sans avoir à installer Ruby ou Python pour l’exécuter. Chaque fois que vous devez exécuter le script Casper, utilisez simplement casperjs.bat nom_script.js plutôt que casperjs scriptname.js.
Puis vérifiez que:casperjs --version résultats:1.0.0
Ces deux numéros de version sont à jour au moment de la rédaction de cet article..
Maintenant que ces deux applications sont en cours d'exécution, procédons rapidement à Hello Worlds pour nous assurer que Phantom et Casper fonctionnent correctement..
Créez un nouveau répertoire et à l'intérieur de celui-ci, créez deux fichiers JavaScript, hellophantom.js et hellocasper.js. Ouvrez-les dans l'éditeur de votre choix et commençons par nous assurer que Phantom fonctionne correctement.
Nous allons commencer dans le hellophantom.js fichier et écrivez un test rapide pour saisir le titre d’une page Web. Je ne vais pas aborder l'API PhantomJS en détail, cela va simplement vous donner une introduction rapide et tester notre installation. Si vous avez déjà PhantomJS en cours d'exécution, vous pouvez ignorer cette partie.
Premièrement, nous devons configurer quelques variables, une qui instancie le module 'page Web' et une autre comme une variable 'URL'.
Accentsconagua
var page = require ('page Web'). create (), url = "http://net.tutsplus.com"; Ensuite, nous pouvons créer la fonction qui navigue vers la page Web, nous passons l’URL en tant qu’argument et une fonction de rappel. Nous recevons un statut dans notre rappel (succès ou échec) sur le ouvrir méthode.
page.open (url, fonction (statut) );
Nous pouvons maintenant appeler la fonction d'évaluation pour obtenir le titre de la page. Nous pouvons retourner le résultat, à une variable, en lui assignant la fonction:
page.open (url, fonction (statut) var title = page.evaluate (fonction () return document.title;););
Enfin, nous allons simplement le déconnecter afin de voir le résultat dans le terminal, puis de sortir du processus Phantom..
console.log ('Hello, World! Le titre de la page sur' + url + 'est' + title); phantom.exit (); Notre script fini ressemblera à quelque chose comme ça.
var page = require ('page Web'). create (), url = "http://net.tutsplus.com"; page.open (url, fonction (statut) var title = page.evaluate (fonction () return document.title;); console.log ('Hello, World! Le titre de la page sur' + url + 'est' + titre); fantôme.exit ();); CD dans le répertoire où se trouve ce script et vous pouvez l'exécuter à l'aide de la commande suivante:
phantomjs hellophantom.js
Après quelques secondes, vous obtiendrez le résultat suivant dans votre terminal:
Bonjour le monde! Le titre de la page sur http://net.tutsplus.com est un tutoriel de développement Web, de débutant à avancé | Nettuts+
C'est bien, mais avant de passer à autre chose, nous pouvons simplement rendre ce code un peu plus flexible avec une nouvelle factorisation rapide. Nous avons quelques modules à notre disposition, dont le module système. Certaines propriétés du module système vous donnent accès à des éléments tels que l'ID de processus sur lequel PhantomJS est exécuté ou le système d'exploitation utilisé, mais nous nous intéressons au args propriété.
le args La propriété retourne un tableau des arguments de la ligne de commande. Le premier élément du tableau est toujours le nom du script, mais nous pouvons passer un nombre quelconque d'arguments à partir de la ligne de commande et les utiliser dans notre script. Ainsi, nous pouvons transmettre l'URL que nous voulons ouvrir, avec fantôme, dans la ligne de commande, afin de pouvoir réutiliser le script à tout moment sans avoir à le modifier à chaque fois..
Nous avons juste besoin d’exiger d’abord le module système, puis de changer le url variable à être l'argument que nous passons à travers:
system = require ('system'), url = system.args [1]; et maintenant nous pouvons exécuter le script avec la commande suivante:
phantomjs hellophantom.js http://net.tutsplus.com
Maintenant que nous savons que Phantom fonctionne, nous pouvons tester Casper. Nous allons répliquer le même script de test, mais cette fois-ci, nous allons utiliser l'API Casper.
Nous devons d’abord instancier une instance de casper:
var casper = require ("casper"). create (); puis récupérez l'URL de l'un des arguments transmis par le terminal. Casper a son propre analyseur de ligne de commande qui se trouve au-dessus de celui fourni avec Phantom et nous pouvons avoir accès à tous les arguments transmis par la ligne de commande, comme nous le faisions auparavant. La seule différence est que notre premier argument sera le premier que nous passerons et non le nom du script (comme c'était le cas avec Phantom)
var url = casper.cli.args [0];
L'API de Casper CLI peut également prendre des options nommées ainsi que des arguments de position. Nous pouvons l'utiliser si nous voulons configurer certaines options ou être plus prolixe avec notre script, par exemple:
casperjs hellocasper.js argumentOne argumentTwo --option1 = this --option2 = que
et nous pouvons obtenir ces options nommées en utilisant cli.get ('optionName'), afin que nous puissions faire quelque chose comme ce qui suit, pour passer à la fois des arguments et des options (si nous avions des options de configuration à configurer):
var argumentOne = casper.cli.args [0]; var argumentTo = casper.cli.args [1]; var thisOption = casper.cli.get ('option'); var thatOption = casper.cli.get ('option2'); Pour le moment, je vais simplement utiliser l'argument positionnel pour obtenir l'URL. Ensuite, nous allons lancer le début() méthode afin de faire toute sorte de navigation. La méthode de démarrage prend une URL de chaîne et une fonction de rappel.
casper.start (url, function () this.echo ('Hello, World! Le titre de la page sur' + url + 'est');); Si vous ne voulez pas avoir toutes vos fonctionnalités, vous pouvez utiliser le puis() méthode. Chaque puis() L'appel de méthode est ajouté comme une étape dans la pile et est exécuté de manière linéaire. Ainsi, plutôt que ce qui précède, vous pourriez avoir:
casper.start (url); casper.then (function () this.echo ('Hello, World! Le titre de la page sur' + url + 'est');); Je préfère utiliser puis(), comme je le trouve plus facile à lire, mais l’un ou l’autre est acceptable et c’est vraiment une question de goût.
Pour obtenir le titre de la page, il existe déjà un getTitle () méthode à notre disposition, nous pouvons donc simplement l’utiliser dans notre écho.
casper.start (url); casper.then (function () this.echo ('Bonjour le monde! Le titre de la page sur' + url + 'est' + 'this.getTitle ());); Enfin, nous courons nos pas avec le courir() method, qui est une méthode obligatoire, est nécessaire pour que votre script Casper puisse s'exécuter. Cette méthode peut aussi avoir une option onComplete callback à exécuter une fois que toutes les étapes sont terminées. Si vous avez utilisé le rappel, vous devez vous assurer de quitter le processus Casper à l’aide de la touche sortie() méthode. Voici un exemple des deux:
// cela n'a pas besoin d'utiliser la méthode exit. casper.run (); // OR // cela nécessite la méthode de sortie casper.run (function () this.echo ('Tout dans la pile est terminé'); this.exit ();) Alternativement, vous pouvez simplement chaîner la méthode de sortie après l'écho:
casper.run (function () this.echo ('Tout dans la pile est terminé'). exit ();) Encore une fois, juste une question de goût.
Maintenant, notre script complet HelloCasper.js devrait ressembler à ceci:
var casper = require ("casper"). create (); var url = casper.cli.args [0]; casper.start (url, function () this.echo ('Hello, World! Le titre de la page sur' + url + 'est' + this.getTitle ()); casper.run (function () this.echo ('Tout dans la pile est terminé.'). exit ();); Nous pouvons maintenant exécuter le script Casper avec la commande suivante:
casperjs hellocasper.js http://net.tutsplus.com
Cela ne fait rien de différent de ce que nous faisions déjà avec Phantom, Casper nous donne juste une belle API (avec quelques extras ajoutés) pour s’asseoir sur Phantom et rend le code que nous écrivons un peu plus détaillé et lisible, c’est particulièrement utile lorsque vous écrivez des scripts qui doivent naviguer sur un site.
Permet maintenant de plonger dans la sauvegarde de quelques instantanés de notre écran.
Je vais commencer avec un fichier appelé casperscreens.js et instancier Casper. Ensuite, configurez un tableau qui contiendra les largeurs de fenêtres que vous souhaitez capturer. Chaque élément du tableau consistera en un autre tableau qui aura la largeur et la hauteur que nous voulons définir.
viewportSizes = [[320 480], [320 568], [600,1024], [1024,768], [1280 800], [1440 900]]
Je vais également définir une variable pour obtenir l'URL à partir de la ligne de commande, puis je souhaite exécuter une expression régulière sur l'URL afin de créer un répertoire pour enregistrer les captures d'écran. Je vais simplement supprimer le http: // séparer et remplacer les points par des traits d'union. Ensuite, nous allons courir casper.start ().
saveDir = url.replace (/ [^ a-zA-Z0-9] / gi, '-'). replace (/ ^ https? - + /, "); casper.start ();
Nous allons maintenant utiliser une boucle et, pour chaque taille de fenêtre, capturer une capture d'écran de l'URL spécifiée. Nous allons définir la fenêtre d'affichage sur les tailles définies dans l'élément de tableau sur lequel nous nous trouvons - ouvrez l'URL - attendez 5000 millisecondes pour vous assurer que la page est chargée - puis capturez deux types de captures d'écran..
Le premier concerne la hauteur et la largeur réelles définies. Pour cela, nous utilisons le Capturer() méthode qui prend deux arguments - une chaîne pour le fichier de sortie et un argument d'objet pour définir quelle partie de la page doit être clipée. La seconde est pour une capture complète de la page avec seulement la largeur définie et nous le faisons en utilisant le captureSelector () méthode qui capture la zone dans le sélecteur défini, dans notre cas, nous utilisons simplement corps et cette méthode prend deux arguments, le premier étant le nom de fichier et le second le sélecteur.
Bien que la capture d'écran réelle définie soit utile, j'ai constaté qu'il était également utile de disposer d'une capture d'écran sans chromage de page entière, afin que vous puissiez voir le déroulement de la page entière..
casper.each (viewportSizes, fonction (self, viewportSize, i) // définissons deux vars pour la hauteur de la fenêtre et la largeur lorsque nous parcourons chaque élément du tableau de la fenêtre var width = viewportSize [0], height = viewportSize [1] ; // donne un peu de temps à la page pour charger casper.wait (5000, function () // définit la fenêtre d'affichage sur la hauteur et la largeur souhaitées this.viewport (width, height); casper.thenOpen (url, function () this.echo ('Ouverture à' + largeur); // Configurez deux vars, un pour la sauvegarde complète de la page, un pour la sauvegarde réelle de la fenêtre. var nom_fichier = nom_sauvegarde + '/ fullpage-' + largeur + ".png"; var ACfilename = saveDir + '/' + width + '-' + height + ".png"; // le sélecteur de capture capture le corps entier this.captureSelector (FPfilename, 'body'); // capture capture une sélection définie du page this.capture (ACfilename, top: 0, left: 0, width: width, height: height); this.echo ('capture instantanée');););); Enfin nous appelons le courir() méthode et dans la fonction de rappel, je vais juste faire écho à ce que la capture est terminée.
casper.run (function () this.echo ('Captures finies pour' + url) .exit ();); Le script complet devrait maintenant ressembler à ceci:
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, fonction (self, viewportSize, i) // définit deux vars pour la hauteur et la largeur de la fenêtre d'affichage lorsque nous parcourons chaque élément du tableau de la fenêtre d'affichage var width = viewportSize [0], height = viewportSize [1]; // donne un peu de temps à la page pour charger casper.wait (5000, function () // définit la fenêtre dans la hauteur et la largeur souhaitées this.viewport (width, height); casper.thenOpen ( url, function () this.echo ('Ouverture à' + largeur); // Configurez deux vars, un pour la sauvegarde de la page complète, un pour la sauvegarde de la fenêtre d'affichage var var nom_fichier = saveDir + '/ fullpage-' + width + ".png"; var ACfilename = saveDir + '/' + width + '-' + height + ".png"; // le sélecteur de capture capture le corps entier this.captureSelector (FPfilename, 'body'); // capture les instantanés une sélection définie o f la page this.capture (ACfilename, top: 0, left: 0, width: width, height: height); this.echo ('instantané pris'); ); ); ); casper.run (function () this.echo ('Captures finies pour' + url) .exit ();); Et maintenant, nous pouvons exécuter ce script en utilisant la commande suivante:
casperjs casperscreens.js http://todomvc.com
J'ai choisi de capturer certains écrans de todomvc.com simplement parce que c'est un site réactif qui peut afficher le type de résultats que nous recherchons..
Maintenant, si vous accédez au répertoire à partir duquel le script a été exécuté, vous verrez qu'un nouveau répertoire a été créé et que tous vos fichiers PNG se trouvent à l'intérieur..
Nous avons donc réussi à écrire un petit peu de JavaScript qui évitera beaucoup de tracas. Le prochain client ou le patron veut quelques captures d'écran, tout en fournissant un script supplémentaire que nous pouvons ajouter à notre boîte à outils lors de tests. . Bien sûr, cela ne nous montre qu'un rendu WebKit, mais pour beaucoup, c'est assez bon.
Maintenant, essayez d’intégrer cela dans votre processus de construction, exécutez-le avec vos autres tests et utilisez la fonctionnalité de capture d’écran pour tester non seulement la réactivité de votre site, mais également l’aspect du parcours des utilisateurs sur des écrans de tailles différentes. Consultez également le plugin Grunt grunt-casper si Grunt fait partie de votre processus de construction..
Si vous êtes un fan de CoffeeScript, vous pouvez même essayer de réécrire ce script dans la syntaxe CoffeeScript. Assurez-vous simplement que votre fichier se termine par le .café extension:
casperjs casperscreen.coffee http://example.com
Et vous n'avez même pas à vous soucier de la pré-compilation de vos scripts CoffeeScript, Casper.
CasperJS et PhantomJS offrent bien plus encore. Découvrez leurs sites respectifs et voyez comment ils peuvent vous aider dans vos tests..
