Comprendre Phantomjs

Points de base

• Phantomjs est un navigateur WebKit sans tête avec API JavaScript et prend en charge nativement une variété de normes Web, y compris le traitement DOM, le sélecteur CSS, le JSON, la toile et le SVG. Il s'agit essentiellement d'un navigateur Web sans GUI, capable d'automatiser divers processus à l'aide de JavaScript.
• Phantomjs est un outil puissant pour les développeurs, fournissant des fonctionnalités telles que l'automatisation des pages, les captures d'écran, les tests et la surveillance du réseau. Il permet l'interaction avec les pages Web sans ouvrir de navigateur, capture des captures d'écran de la page Web, exécute des tests sans GUI et peut surveiller le comportement et les performances du réseau.
• Bien que les Phantomjs soient plus compliqués, il ne convient pas seulement aux développeurs experts. Il peut être utilisé dans des systèmes d'intégration continue, peut être intégré à des cadres de test tels que le karma, et peut être programmé pour collecter des données sur les performances de la page Web. Il est particulièrement adapté à la détection des problèmes de code immédiatement lorsque des problèmes surviennent et à ce que les codes d'erreur ne soient pas poussés dans le projet.

Depuis sa sortie, Phantomjs est devenu une partie importante du flux de travail de nombreux ingénieurs JavaScript. Dans un article intitulé "Headless Webkit et Phantomjs", Colin Ihrig présente le concept de "Webkit sans tête" et présente brièvement Phantomjs. Avec plus de 11 000 étoiles sur GitHub, Phantomjs est devenu l'outil de choix pour les développeurs, en particulier lors du test du code. Cependant, en raison du manque de compréhension de sa véritable utilisation, de nombreux développeurs doivent encore éviter de mettre en œuvre cet outil dans leurs projets. Pour combler cet écart, cet article expliquera le concept de base de PhantoMJS et essaiera de supprimer certaines des complexités qui confondent souvent les développeurs. Après avoir lu cet article, vous creuserez ce qu'est Phantomjs et pourquoi il est considéré comme un outil si puissant. "Qu'est-ce qu'un navigateur sans tête?"

Sur le site Web de Phantomjs, la technologie est expliquée comme suit: & gt; 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.

Évidemment, ceux qui sont nouveaux dans Phantomjs peuvent trouver des termes difficiles à comprendre. Cette description peut submerger les développeurs en herbe et rendre ceux qui ne connaissent pas ces technologies qui ne fonctionnent que pour les développeurs très professionnels. Cependant, je peux vous assurer que ces concepts sont faciles à comprendre. Phantomjs est un navigateur Web qui n'existe que dans les scripts. Il n'a pas d'interface graphique, mais un navigateur sans tête qui peut automatiser différents processus à l'aide de JavaScript. Jetons un coup d'œil aux avantages de cet outil hors de la boîte. Avant d'expliquer le sujet, si vous n'avez pas installé PhantomJS, il est recommandé de l'installer sur votre ordinateur. Il peut être installé via NPM dans la CLI en exécutant la commande suivante: `` ' NPM Installer Phantomjs -g

<code>
安装完成后，您就可以访问phantomjs命令。PhantomJS核心概念
-----------------------

让我们深入了解其核心概念。### 页面自动化

PhantomJS允许开发人员访问浏览器的DOM API。毕竟，即使PhantomJS没有GUI，它仍然是一个浏览器。开发人员可以编写将在指定页面上评估的JavaScript代码。虽然这似乎并不重要，但这允许我们自动化与网页的任何类型的交互，而无需打开浏览器（这将节省您大量时间）。这在使用PhantomJS运行测试时尤其有用，我们很快就会看到更多相关内容。现在，让我们看一下项目网站中的以下示例。它显示了如何使用evaluate()函数从页面返回不同的对象。在本例中，evaluate()用于返回ID为myagent的元素的textContext属性。要启动此示例，我们只需在命令行中运行名为phantomjs userAgent.js的文件，我们将在控制台中收到结果。```
//userAgent.js
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();
});</code>

Shot d'écran

En tirant parti de WebKit, Phantomjs est capable de rendre quoi que ce soit sur une page Web et de l'enregistrer en tant qu'image. Par conséquent, il peut être utilisé pour automatiser le processus de capture de captures d'écran des pages Web que les développeurs peuvent analyser pour s'assurer que tout semble bon. Ces images peuvent être enregistrées dans une variété de formats tels que PNG, JPEG, PDF et GIF. Le code suivant est tiré de la documentation de Phantomjs sur les captures d'écran. En exécutant Phantomjs github.js dans la ligne de commande, le code suivant rendra l'image PNG de la page d'accueil GitHub. `` ' //github.js var page = require ('webpage'). Create (); page.open (' https://www.php.cn/link/b93df0dce7fb0fcf484c0eceda9b816c ', function () {{ page.render ('github.png'); Phantom.Exit (); });

<code>
PhantomJS还允许开发人员调整这些截图的大小，并指定我们想要捕获的确切区域。下面，我们可以看到一个示例，它只是上面显示的github.js脚本的修改版本。```
var page = require('webpage').create();
//viewportSize是无头浏览器的实际大小
page.viewportSize = { width: 1024, height: 768 };
//clipRect是您正在截图的页面部分
page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };
//其余代码与之前的示例相同
page.open('http://example.com/', function() {
  page.render('github.png');
  phantom.exit();
});</code>

Tester

Phantomjs aide les développeurs à automatiser le processus d'exécution des tests sans interface graphique. Phantomjs utilise son navigateur sans tête pour gérer différents tests unitaires et utilise la ligne de commande pour indiquer aux développeurs où ils connaissent des erreurs. Il ne fait aucun doute que Phantomjs est principalement connu pour son utilisation dans les tests; En développement, PhantoMJS est utilisé pour lancer différents cadres de test, tels que le karma. En accédant à la page de documentation sur les tests sans tête, vous pouvez voir quels frameworks ont été construits pour prendre en charge les Phantomjs et une liste de cadres qui peuvent être accessibles via des coureurs de test externes tels que le plugin Phantomjs Runner Qunit. PhantoMJS est également utilisé pour les systèmes d'intégration continue. Pour ceux qui ne connaissent pas le processus d'intégration continue, il gère les applications de surveillance. Les développeurs peuvent intégrer des PhantoMJ avec des systèmes CI tels que Travis CI pour exécuter des tests sur tout nouveau code ajouté au projet avant de pousser le code. En conséquence, les développeurs sont en mesure de détecter les problèmes de code immédiatement lorsque des problèmes surviennent et de les résoudre, garantissant que les codes d'erreur ne sont pas poussés dans le projet. Surveillance du réseau Une autre caractéristique centrale de Phantomjs est sa capacité à surveiller les connexions réseau. Tel que défini dans la documentation: & gt; parce que PhantoMJS permet d'inspection du trafic réseau, il convient à la création de diverses analyses du comportement et des performances du réseau.

Cela signifie que les Phantomjs peuvent être programmés pour collecter différentes données sur les performances de la page Web. Lorsqu'il est associé à des phantomjs, YSLOW peut sortir les résultats de ces tests en utilisant différents formats (tels que TAP). Après la mise en œuvre, TAP permet la communication entre les tests unitaires et les outils de test (dans ce cas, PhantoMJS). De plus, PhantoMJS et YSLOW utilisent le protocole TAP dans un système d'intégration continue et surveillent les performances du nouveau code ajouté au projet. De cette façon, les développeurs peuvent être informés de toute régression des performances avant de pousser le code. Conclusion

Espérons que vous avez une compréhension claire de ce qu'est Phantomjs, de la façon dont cela fonctionne et de sa puissance. Si vous n'êtes pas familier avec PhantoMJS et les tests généraux et que vous souhaitez en savoir plus sur ces sujets, voici quelques ressources que vous pourriez trouver très utiles: - Introduction à Phantomjs et Casperjs

• Utilisez des phantomjs pour l'automatisation
• web rampant et automatisation à l'aide de Phantomjs et Casperjs
• Automatisation avec jQuery, Phantomjs et Node

J'espère que vous avez apprécié cet article. Si vous avez des questions ou des questions, n'hésitez pas à commenter la section ci-dessous. Des questions fréquemment posées sur Phantomjs (FAQ)

Quel est le but principal de Phantomjs?

Phantomjs est un navigateur scriptable sans tête utilisé pour automatiser les interactions Web. Il fournit une API JavaScript qui permet la navigation automatique, les captures d'écran, le comportement des utilisateurs et les assertions, ce qui en fait un outil approprié pour les tests de site Web. Il permet également de faire fonctionner et de rendre des pages Web du côté serveur, ce qui est très utile pour la rampe Web, le rendu des pages et la compréhension de la sémantique de page Web.

En quoi Phantomjs est-il différent des autres navigateurs sans tête?

Contrairement à d'autres navigateurs sans tête, PhantoMJS permet la prise en charge native pour diverses normes Web telles que le traitement DOM, le sélecteur CSS, le JSON, la toile et le SVG. Il prend également en charge la capture Web, qui est très utile pour générer des captures d'écran ou des PDF de site Web. Phantomjs est également connu pour sa prise en charge rapide et native pour une variété de normes Web.

Les Phantomjs sont-ils adaptés à la rampe Web?

Oui, PhantoMJS est un excellent outil pour la rampe Web. Il peut rendre et comprendre les pages Web comme les utilisateurs humains, mais a l'avantage de pouvoir automatiser le processus. Cela en fait un outil puissant pour extraire des informations des sites Web, en particulier ceux qui comptent fortement sur JavaScript.

Les Phantomjs peuvent-ils être utilisés pour tester les sites Web mobiles?

Oui, Phantomjs est un outil polyvalent qui peut être utilisé pour tester les sites Web mobiles. Il permet aux développeurs de simuler une variété de tailles d'écran et de résolutions, leur permettant de tester l'apparence et la fonctionnalité du site Web sur différents appareils.

Comment les Phantomjs gèrent-ils JavaScript?

Phantomjs a d'excellentes capacités de traitement JavaScript. Il peut exécuter des fonctions JavaScript complexes et même rendre les pages Web qui reposent fortement sur JavaScript. Cela en fait un outil puissant pour tester les pages Web dynamiques.

Les PhantoMJS peuvent-ils capturer des captures d'écran de la page Web?

Oui, l'une des caractéristiques clés de PhantomJS est la possibilité de capturer des captures d'écran des pages Web. Ceci est particulièrement utile pour tester les aspects visuels d'un site Web, tels que la mise en page, la conception et le comportement réactif.

Les PhantomJ sont-ils adaptés aux systèmes d'intégration continue?

Oui, Phantomjs est conçu pour les systèmes d'intégration continue. Sa fonction sans tête le rend idéal pour exécuter des tests en arrière-plan sans interrompre d'autres processus.

Comment les Phantomjs soutiennent-ils la norme Web?

PhantoMJS prend en charge nativement une variété de normes Web, notamment le traitement DOM, le sélecteur CSS, le JSON, la toile et le SVG. Cela signifie qu'il peut rendre et interagir avec les pages Web aussi précisément que les utilisateurs humains.

Les Phantomjs peuvent-ils rendre le PDF?

Oui, PhantoMJS est capable de rendre les PDF. Ceci est utile pour générer des versions imprimables de pages Web ou créer des documents.

est l'open source des Phantomjs?

Oui, Phantomjs est un projet open source. Cela signifie que son code source est libre de visualiser, de modifier et de distribuer. Cela signifie également qu'il profite de la contribution d'une énorme communauté de développeurs qui travaillent ensemble pour améliorer le logiciel et ajouter de nouvelles fonctionnalités.

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!