Webkit sans tête et Phantomjs

Points de base

• Phantomjs, un navigateur sans tête basé sur WebKit qui permet une automatisation programmatique et un test plus rapides des pages Web sans avoir besoin d'une interface utilisateur graphique.
• Phantomjs fournit des fonctionnalités puissantes telles que la possibilité d'interagir avec les pages via JavaScript, permettant une automatisation facile des tâches telles que cliquer sur les boutons, soumettre des formulaires et même charger et manipuler des pages Web à l'aide de bibliothèques telles que l'API DOM standard ou jQuery.
• Phantomjs fournit une vaste API du système de fichiers qui permet aux applications de stocker le code source du système de fichiers, de prendre des captures d'écran des pages Web et même d'inclure des fichiers de script externes en pages.
• Bien que PhantoMJS soit puissant, il n'est pas très intégré aux projets Node.js.

Si vous lisez cet article, vous saurez très probablement ce qu'est un navigateur. Maintenant, supprimez l'interface graphique et vous obtenez le soi-disant navigateur sans tête . Un navigateur sans tête peut faire toutes les mêmes choses qu'un navigateur normal, mais c'est plus rapide. Ils sont parfaits pour automatiser et tester les pages Web programmatiques. Il existe actuellement de nombreux navigateurs sans tête, et Phantomjs est le meilleur d'entre eux. Construit sur WebKit, le moteur derrière Chrome et Safari, Phantomjs vous offre des fonctionnalités de navigateur puissantes sans avoir besoin d'une interface graphique volumineuse. Il est facile de commencer avec Phantomjs - il suffit de télécharger l'exécutable. Ensuite, créez un fichier nommé hello.js et ajoutez les lignes de code suivantes:

console.log("Hello World!");
phantom.exit();

Pour exécuter le script, exécutez la commande suivante. Notez que l'exécutable Phantomjs doit être dans le répertoire actuel ou quelque part dans le chemin de l'environnement. Si tout est configuré correctement, Phantomjs imprime "Hello World!" Sur la console et se termineront lorsque Phantom.Exit () est appelé.

phantomjs hello.js

en utilisant la page Web

Une fois Phantomjs en cours d'exécution, vous pouvez commencer à automatiser le Web. L'exemple suivant charge la page d'accueil de Google et enregistre la capture d'écran dans un fichier. La ligne 1 crée une nouvelle instance de la page Web. Ligne 4 charge Google.com. Une fois la page chargée, la fonction de rappel OnloadFinied () sera exécutée. La fonction de rappel reçoit un seul statut de paramètre, ce qui indique si la page est chargée avec succès. L'URL pour charger la page est disponible en page.url. Cette propriété est particulièrement utile lorsque la page contient des redirections, et vous voulez savoir exactement où vous êtes. La ligne 8 utilise la méthode Render () de la page pour prendre une capture d'écran. Render () peut créer des fichiers PNG, GIF, JPEG et PDF.

console.log("Hello World!");
phantom.exit();

Paramètres de page

De nombreux paramètres d'objets page peuvent être personnalisés en fonction des besoins de l'application. Par exemple, si vous êtes uniquement intéressé à télécharger le code source, vous pouvez accélérer votre application en ignorant le fichier image et en fermant JavaScript. L'exemple de réécriture suivant reflète ces changements. Les paramètres modifiés sont affichés sur les lignes 3 et 4. Notez que les modifications de paramètre doivent être apportées avant d'appeler Open (). Si vous regardez la capture d'écran de cet exemple, vous remarquerez que l'image de logo Google est manquante, mais le reste de la page reste le même.

phantomjs hello.js

Accès au système de fichiers

Jusqu'à présent, notre exemple a chargé la page et enregistré la capture d'écran en tant que fichier image. Bien que cela soit sans aucun doute cool, de nombreuses applications préfèrent stocker le code source dans un système de fichiers. Phantomjs le fait en fournissant une large gamme d'API du système de fichiers. L'exemple suivant utilise le module de système de fichiers pour écrire le code source Google.com dans un fichier. Tout d'abord, importez le module de système de fichiers sur la ligne 2. Sur la ligne 6, ouvrez le fichier de sortie pour l'écriture. Sur la ligne 7, utilisez la méthode écrite () pour écrire les données dans le fichier. Le code source réel peut être obtenu via la propriété de contenu de la page. Enfin, fermez le fichier et terminez les Phantomjs.

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};

Exécuter javascript

L'une des caractéristiques les plus puissantes de PhantoMJS est la capacité d'interagir avec les pages via JavaScript. Cela facilite l'automatise des tâches telles que cliquer sur les boutons et la soumission des formulaires. Notre exemple suivant effectue une recherche Web en chargeant la page d'accueil de Google, en tapant une requête et en soumettant un formulaire de recherche. Le début de l'exemple devrait sembler familier. Le nouveau contenu commence à la ligne 8 et nous déterminons quelle page a été chargée. S'il s'agit de la page d'accueil, la méthode Evaluate () de la page est appelée. Evaluate () Exécute le code que vous fournissez dans le contexte de la page. Cela vous donne en fait les mêmes autorisations que le développeur original de la page. À quel point est-ce cool?

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.settings.javascriptEnabled = false;
page.settings.loadImages = false;
page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};

Dans l'évaluation (), nous trouvons la zone de recherche et le formulaire. Nous définissons la valeur de la zone de recherche sur "JSPRO" et soumettons le formulaire. Cela entraînera le licenciement de la méthode OnloadFinied () de la page. Cependant, cette fois, des captures d'écran des résultats de recherche seront prises et des fantômes quitteront. PhantoMJS fournit également deux méthodes, notammentjs () et injectjs (), qui vous permettent d'ajouter des fichiers de script externes à une page. includejs () est utilisé pour inclure tout fichier de script accessible par la page. Par exemple, vous pouvez utiliser le code suivant pour inclure jQuery dans l'exemple précédent. Remarquez l'appel à inclurejs () à la ligne 9 et la syntaxe jQuery à l'intérieur d'évaluation ().

var page = require("webpage").create();
var fs = require("fs");
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var file = fs.open("output.htm", "w");

  file.write(page.content);
  file.close();
  phantom.exit();
};

La méthode

injectjs () est similaire à includejs (). La différence est que le fichier de script injecté n'a pas besoin d'être accessible à partir de l'objet page. Par exemple, cela vous permet d'injecter des scripts de votre système de fichiers local.

phantomjs et node.js

Malheureusement, Phantomjs n'a pas été intégré à Node.js. Certains projets ont été créés pour essayer de contrôler les Phantomjs de Node.js, mais ils sont tous un peu maladroits. Les projets existants utilisent des modules de processus pour enfants pour générer des instances PhantomJS. Ensuite, PhantoMJS charge une page Web spéciale qui communique avec Node.js à l'aide de WebSockets. Ce n'est peut-être pas idéal, mais cela fonctionne. Deux modules de nœuds PhantoMJS plus populaires sont le nœud nœud-phantom et le nœud phantomjs. J'ai récemment commencé à développer mon propre module de nœud Phantomjs appelé Ghostbuster. Ghostbuster est similaire à Node-Phantom, mais tente de réduire la nidification de rappel en fournissant des commandes plus puissantes. Moins d'appels à Phantomjs, moins vous perdez de temps à la communication sur WebSockets. Une autre option est Zombie.js, un navigateur léger sans tête construit sur JSDom. Zombie n'est pas aussi puissant que Phantomjs, mais c'est un véritable module Node.js.

Conclusion

Après avoir lu cet article, vous devriez avoir une compréhension de base des Phantomjs. L'une des meilleures caractéristiques de Phantomjs est sa facilité d'utilisation. Si vous connaissez déjà JavaScript, la courbe d'apprentissage est petite. PhantomJS prend également en charge diverses autres fonctionnalités non couvertes dans cet article. Comme toujours, je vous encourage à voir la documentation. Il existe également quelques exemples qui montrent la pleine fonctionnalité de PhantoMJS!

FAQ sur Webkit sans tête et Phantomjs

Quelle est la principale différence entre Webkit sans tête et Phantomjs?

webkit sans tête et Phantomjs sont tous deux des outils pour automatiser les navigateurs Web. Cependant, la principale différence est leur fonction. WEBKIT sans tête est un navigateur sans interface utilisateur graphique qui peut le contrôler par programme pour l'automatisation, les tests et le rendu côté serveur. Phantomjs, en revanche, est un navigateur scriptable sans tête pour automatiser les interactions Web, fournissant des API JavaScript qui prennent en charge la navigation automatisée, les captures d'écran, le comportement des utilisateurs et les assertions.

Les Phantomjs sont-ils toujours maintenus?

En mars 2018, Phantomjs n'a plus été activement maintenu. La raison principale est l'émergence de navigateurs modernes sans tête tels que les navigateurs chromés sans tête et les navigateurs sans tête Firefox, qui offrent plus de fonctionnalités et un meilleur support.

Quelles sont les alternatives à Phantomjs?

Étant donné que les Phantomjs ne sont plus maintenus, certaines alternatives émergent. Il s'agit notamment de marionnettiste, d'une bibliothèque de nœuds qui fournit une API de haut niveau pour contrôler Chrome ou Chromium via le protocole Devtools, et Selenium WebDriver, une collection open source d'API pour les tests automatisés d'applications Web.

Comment fonctionne Phantomjs?

Phantomjs fonctionne en fournissant une API JavaScript qui prend en charge la navigation automatisée, les captures d'écran, le comportement des utilisateurs et les assertions. Il s'agit d'un webkit scriptable sans tête utilisant l'API JavaScript. Il a une prise en charge rapide et native pour une variété de normes Web: le traitement DOM, le sélecteur CSS, le JSON, la toile et le SVG.

Puis-je utiliser des phantomjs pour la rampe Web?

Oui, les phantomjs peuvent être utilisés pour la rampe Web. Il vous permet de charger et de manipuler les pages Web à l'aide de bibliothèques communes telles que l'API DOM standard ou jQuery.

Comment installer des Phantomjs?

PhantoMJS peut être installé via NPM (Node Package Manager). Vous pouvez utiliser la commande "NPM Install Phantomjs" dans le terminal ou dans l'invite de commande.

Quel est le rôle de la webkit sans tête dans le rendu côté serveur?

webkit sans tête joue un rôle crucial dans le rendu côté serveur, car il permet au serveur de préménager des pages rendues par JavaScript, de les convertir en HTML, puis de les envoyer au client. Cela améliore les performances et le référencement de votre application Web.

Puis-je utiliser la webkit sans tête pour des tests automatisés?

Oui, Webkit sans tête est un excellent outil pour les tests automatisés. Il vous permet d'exécuter des tests dans un environnement de navigateur réel sans avoir besoin d'une interface utilisateur visible.

Comment installer une webkit sans tête?

Le processus d'installation de Headless WebKit dépend de l'outil spécifique que vous utilisez. Par exemple, si vous utilisez Puppeteer, vous pouvez l'installer via NPM à l'aide de la commande "NPM Installer Puppeteer".

Quels sont les avantages de l'utilisation de WebKit sans tête par rapport aux navigateurs automatisés traditionnels?

webkit sans tête présente plusieurs avantages par rapport aux navigateurs traditionnels dans l'automatisation. C'est plus rapide car il ne faut pas de temps pour rendre le visuel. Il permet également la navigation automatisée et scriptable, ce qui est très utile pour les tests et le robinet Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!