Conseil rapide: commencer avec Chrome sans tête dans Node.js

Chrome sans tête: un outil puissant pour les tests Web automatisés et ramper

Points de base

• En commençant par Chrome Version 59 (version 60 pour les utilisateurs de Windows), Chrome sans tête vous permet de simuler programmatiques l'interaction utilisateur avec les sites Web et de capturer les résultats pour les tests. Il utilise des moteurs de chrome et de clignotement pour simuler l'expérience utilisateur dans Chrome.
• L'exécution de chrome sans tête dans Node.js nécessite le module chrome-remote-interface (pour simplifier l'abstraction des commandes et notifications) et du module chrome-launcher (pour lancer Chrome à partir de node.js sur plusieurs plates-formes).
• Après avoir initialisé la session et défini le domaine de test, vous pouvez naviguer sur le site Web, copier les voyages des utilisateurs et capturer les résultats. Vous pouvez également utiliser la fonction captureScreenshot pour capturer des captures d'écran de la page lors de la navigation sur le site Web.
• Bien que le chrome sans tête n'est pas entièrement intégré dans des outils comme le sélénium, en raison de sa capacité à rendre JavaScript, c'est le meilleur moyen de reproduire l'expérience utilisateur d'une manière entièrement automatisée, parfaite pour les tâches de rampe Web automatisées à grande échelle.

Dans notre travail, il est souvent nécessaire de reproduire les voyages utilisateur à plusieurs reprises pour s'assurer que la page offre une expérience cohérente lors du changement du site Web. La clé pour y parvenir est de nous permettre d'écrire des bibliothèques de ces scripts de test afin que nous puissions exécuter des affirmations sur eux et maintenir la documentation des résultats. C'est ce que fait le navigateur sans tête: un outil de ligne de commande qui vous permet de simuler programmatiques l'interaction utilisateur avec votre site Web et de capturer les résultats pour les tests.

Depuis de nombreuses années, de nombreuses personnes utilisent des Phantomjs, des Casperjs et d'autres outils pour le faire. Mais, tout comme l'amour, nos cœurs peuvent être transférés ailleurs. En commençant par Chrome version 59 (version 60 pour les utilisateurs de Windows), Chrome est livré avec son propre navigateur sans tête. Bien qu'il ne prenne pas en charge le sélénium pour le moment, il utilise des moteurs de chrome et de clignotement, c'est-à-dire qu'il simule l'expérience utilisateur réelle de Chrome.

Le code de cet article peut être trouvé dans notre référentiel GitHub.

Exécutez Chrome sans tête à partir de la ligne de commande

Exécuter Chrome sans tête à partir de la ligne de commande est relativement facile. Sur un Mac, vous pouvez définir un alias pour Chrome et l'exécuter avec le paramètre de ligne de commande --headless:

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/

Sur Linux, c'est encore plus facile:

google-chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/

• --headless: aucune interface utilisateur ou afficher les dépendances du serveur en cours d'exécution
• --disable-gpu: Désactiver l'accélération matérielle du GPU. Ce paramètre est actuellement requis.
• --remote-debugging-port: Activer le débogage à distance sur HTTP sur le port spécifié.

Vous pouvez également interagir avec la page demandée, par exemple, pour imprimer document.body.innerHTML à la sortie standard, vous pouvez effectuer ce qui suit:

google-chrome --headless --disable-gpu --dump-dom http://endless.horse/

Si vous êtes curieux de savoir la possibilité, vous pouvez trouver la liste complète des paramètres ici.

Exécutez Chrome sans tête dans Node.js

Cependant, l'objectif de cet article n'est pas sur la ligne de commande, mais sur la façon d'exécuter Chrome sans tête dans Node.js. Pour ce faire, nous avons besoin du module suivant:

• chrome-remote-interface: L'API JavaScript fournit une simple abstraction des commandes et notifications.
• chrome-launcher: nous permet de lancer Chrome dans Node.js sur plusieurs plates-formes.

Ensuite, nous pouvons configurer notre environnement. Cela suppose que Node.js et NPM sont installés sur votre machine. Si ce n'est pas le cas, consultez notre tutoriel.

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/

Après cela, nous voulons instancier une session à l'aide de Headless-Chrome. Commençons par créer un fichier

dans le dossier du projet: index.js

google-chrome --headless --disable-gpu --remote-debugging-port=9090 https://www.sitepoint.com/

Tout d'abord, nous introduisons des dépendances, puis créons une fonction de Call d'auto-mensonge qui instanciera la session chromée. Notez que le drapeau

est requis au moment de la rédaction, mais peut ne pas être nécessaire lorsque vous lisez ceci, car c'est juste une solution de contournement (comme Google recommande). Nous utiliserons --disable-gpu pour nous assurer que notre application attend que le navigateur sans tête commence avant d'effectuer les prochaines étapes. async/await

Ensuite, nous devons exposer publiquement le domaine requis pour les tests:

google-chrome --headless --disable-gpu --dump-dom http://endless.horse/

L'objet de page le plus important ici - nous l'utiliserons pour accéder au contenu rendu à l'interface utilisateur. Ce sera également là que nous spécifions les emplacements de navigation, les éléments interactifs et où nous exécutons le script.

Explorer la page

Après avoir initialisé la session et défini le domaine, nous pouvons commencer à naviguer sur le site Web. Nous voulons sélectionner un point de départ, nous utilisons donc le domaine de page activé ci-dessus pour naviguer:

mkdir headless
cd headless
npm init -y
npm install chrome-remote-interface --save
npm install chrome-launcher --save

Cela chargera la page. Nous pouvons ensuite utiliser la méthode

pour définir les étapes pour exécuter l'application pour exécuter le code pour copier notre parcours utilisateur. Dans cet exemple, nous obtenons simplement le contenu du premier paragraphe: loadEventFired

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');

(async function() {
  async function launchChrome() {
    return await chromeLauncher.launch({
      chromeFlags: [
        '--disable-gpu',
        '--headless'
      ]
    });
  }
  const chrome = await launchChrome();
  const protocol = await CDP({
    port: chrome.port
  });

  // 所有后续代码片段都位于此处

})();

Si vous exécutez le script en utilisant

, vous devriez voir des résultats similaires à la sortie suivante: node index.js

Aller plus loin - Saisissez la capture d'écran

C'est bien, mais nous pouvons tout aussi facilement remplacer n'importe quel code par une valeur

pour utiliser le sélecteur de requête pour cliquer sur les liens, remplir les champs de formulaire et exécuter une série d'interactions. Chaque étape peut être stockée dans un fichier de configuration JSON et chargé dans votre script Node.js pour exécuter en séquence. Les résultats de ces scripts peuvent être vérifiés à l'aide de plates-formes de test telles que Mocha, vous permettant de référencer les références si les valeurs capturées répondent aux exigences d'interface utilisateur / UX. script1

En complément du script de test, vous voudrez peut-être capturer des captures d'écran de la page lors de la navigation sur le site Web. Heureusement, le domaine fourni a une fonction

qui le fait avec précision. captureScreenshot

Le logo

const {
  DOM,
  Page,
  Emulation,
  Runtime
} = protocol;
await Promise.all([Page.enable(), Runtime.enable(), DOM.enable()]);

est un autre logo qui doit être pris en charge sur toutes les plateformes au moment de la rédaction, et peut ne pas être nécessaire dans les futures itérations. fromSurface

Exécutez le script avec

et vous devriez voir des résultats similaires à la sortie suivante: node index.js

Conclusion

Si vous écrivez des scripts d'automatisation, vous devriez maintenant commencer à utiliser le navigateur sans tête de Chrome. Bien qu'il ne s'intègre toujours pas pleinement dans des outils comme le sélénium, les avantages de la simulation des moteurs de rendu chromé ne peuvent pas être sous-estimés. C'est la meilleure façon de reproduire l'expérience utilisateur de manière entièrement automatisée.

Je vous fournirai quelques documents de lecture supplémentaires:

• Documentation de l'API: https://www.php.cn/link/fc56459a18776e2a100854c16a1fd78b
• Débutant du chrome sans tête: https://www.php.cn/link/ada77e9fac537039c9adb2787b9af7da

Veuillez me dire votre expérience avec Chrome sans tête dans les commentaires ci-dessous.

(La partie FAQS est omise ici car elle est répétée avec le texte d'origine et est trop longue. Le contenu FAQ peut être éventuellement conservé ou réorganisé au besoin.)

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!