Tutoriel de démarrage rapide PhantomJS (API WebKit JavaScript côté serveur)_compétences javascript

PhantomJS est une API JavaScript côté serveur basée sur WebKit. Il prend entièrement en charge le Web sans nécessiter la prise en charge du navigateur, et il est rapide et prend en charge nativement diverses normes Web : traitement DOM, sélecteurs CSS, JSON, Canvas et SVG. PhantomJS peut être utilisé pour l'automatisation des pages, la surveillance du réseau, les captures d'écran de pages Web et les tests sans interface, etc.

Site officiel de PhantomJs : http://phantomjs.org/
GitHub :https://github.com/ariya/phantomjs/wiki/Quick-Start

1.Installation

Adresse de téléchargement du package d'installation : http://phantomjs.org/download.html, y compris les versions Windows, Mac OS et Linux. Vous pouvez choisir la version correspondante à télécharger et décompresser (pour plus de commodité, vous pouvez définir des variables d'environnement pour phantomjs), qui contient un dossier d'exemple avec beaucoup de code déjà écrit à utiliser. Cet article suppose que phantomjs a été installé et que les variables d'environnement ont été définies.

2. Utiliser

Bonjour le monde !

Créez un nouveau fichier texte contenant les deux lignes de script suivantes :

console.log('Hello, world!');
phantom.exit();

Enregistrez le fichier sous hello.js et exécutez-le :

phantomjs bonjour.js

Le résultat de sortie est : Bonjour tout le monde !

La première ligne imprimera la chaîne dans le terminal et la deuxième ligne phantom.exit quittera l'opération.
Il est très important d'appeler phantom.exit dans ce script, sinon PhantomJS ne s'arrêtera pas du tout.

Arguments de script – Arguments de script

Comment passer des paramètres dans Phantomjs ? Comme indiqué ci-dessous :

Foo, bar, baz sont les paramètres à passer. Comment les obtenir :

var system = require('system');
if (system.args.length === 1) {
 console.log('Try to pass some args when invoking this script!');
} else {
 system.args.forEach(function (arg, i) {
   console.log(i + ': ' + arg);
 });
}
phantom.exit();

Il affichera :

0 : foo
1 : barre
2 : baz

Chargement de la page – Chargement de la page

En créant un objet de page Web, une page Web peut être chargée, analysée et rendue.

Le script suivant utilise l'exemple d'objet page dans sa forme la plus simple. Il charge example.com et l'enregistre sous forme d'image, example.png .

var page = require('webpage').create();
page.open('http://example.com', function () {
 page.render('example.png');
 phantom.exit();
});

Grâce à cette fonctionnalité, PhantomJS peut être utilisé pour prendre des captures d'écran de pages Web et prendre des instantanés de certains contenus, comme l'enregistrement de pages Web et de SVG sous forme d'images, de PDF, etc. Cette fonction est géniale.

Le prochain script loadspeed.js charge une URL spéciale (n'oubliez pas le protocole http) et mesure le temps nécessaire pour charger la page.

var page = require('webpage').create(),
 system = require('system'),
 t, address;

if (system.args.length === 1) {
 console.log('Usage: loadspeed.js <some URL>');
 phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function (status) {
 if (status !== 'success') {
  console.log('FAIL to load the address');
 } else {
  t = Date.now() - t;
  console.log('Loading time ' + t + ' msec');
 }
 phantom.exit();
});

Exécutez ce script depuis la ligne de commande :

phantomjs loadspeed.js http://www.google.com
Cela donne quelque chose comme :

Chargement http://www.google.com Temps de chargement 719 ms

Évaluation du code – Évaluation du code

Pour évaluer JavaScript ou CoffeeScript dans le contexte d'une page Web, utilisez la méthode évaluer(). Le code s'exécute dans un "bac à sable" et n'a aucun moyen de lire des objets et variables JavaScript en dehors du contexte de la page à laquelle il appartient. évalue() renvoie un objet, mais il est limité aux objets simples et ne peut pas contenir de méthodes ou de fermetures.

Voici un exemple pour afficher le titre de la page :

var page = require('webpage').create();
page.open(url, function (status) {
 var title = page.evaluate(function () {
  return document.title;
 });
 console.log('Page title is ' + title);
});

Toutes les informations de console de la page Web et y compris le code d'evaluate() ne seront pas affichées par défaut. Pour remplacer ce comportement, utilisez la fonction de rappel onConsoleMessage. L'exemple précédent peut être réécrit comme suit :

var page = require('webpage').create();
page.onConsoleMessage = function (msg) {
 console.log('Page title is ' + msg);
};
page.open(url, function (status) {
 page.evaluate(function () {
  console.log(document.title);
 });
});

Manipulation DOM – Manipulation DOM

Étant donné que le script s'exécute comme s'il s'agissait d'un navigateur Web, les scripts DOM standard et les sélecteurs CSS fonctionnent correctement. Cela rend PhantomJS adapté à la prise en charge d'une variété de tâches d'automatisation de pages.

Le useragent.js suivant lira l'attribut textContent de l'élément avec l'identifiant myagent :

var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
page.settings.userAgent = 'SpecialAgent';
page.open('http://www.httpuseragent.org', function (status) {
 if (status !== 'success') {
  console.log('Unable to access network');
 } else {
  var ua = page.evaluate(function () {
   return document.getElementById('myagent').textContent;
  });
  console.log(ua);
 }
 phantom.exit();
});

L'exemple ci-dessus fournit également un moyen de personnaliser l'agent utilisateur.

Utilisez JQuery et d'autres bibliothèques :

var page = require('webpage').create();
page.open('http://www.sample.com', function() {
 page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
  page.evaluate(function() {
   $("button").click();
  });
  phantom.exit()
 });
});

Demandes et réponses réseau – Demandes et réponses réseau

Lorsqu'une page demande une ressource à un serveur distant, la demande et la réponse peuvent être suivies via les méthodes de rappel onResourceRequested et onResourceReceived. Exemple netlog.js :

var page = require('webpage').create();
page.onResourceRequested = function (request) {
 console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function (response) {
 console.log('Receive ' + JSON.stringify(response, undefined, 4));
};
page.open(url);

Pour plus d'informations sur l'utilisation de cette fonctionnalité pour la sortie HAR et l'analyse des performances basée sur YSlow, veuillez vous référer à la Page de surveillance du réseau.