Puppeteer est une bibliothèque open-source node js qui peut être utilisée pour les outils de web scraping. Il peut également être utilisé pour effectuer l'automatisation des tests dans les applications Web. De nos jours, l'utilisation de Puppeteer augmente rapidement dans l'espace de test logiciel automatisé. Une connaissance de base de la ligne de commande, de Javascript et de la structure HTML DOM est nécessaire pour comprendre le didacticiel du marionnettiste. L'ensemble du didacticiel est séparé dans les articles ci-dessous.
Tutoriel de marionnettiste
Tutoriel Tosca # 1: Aperçu du marionnettiste
Tosca Tutorial # 2: Variables d'environnement de marionnettiste
Tosca Tutorial # 3: Présentation de l'automatisation du scraping Web et des tests de marionnettiste
Tosca Tutorial # 4: Installez Puppeteer
Tosca Tutorial # 5: Exemple de projet de marionnettiste
Dans ce didacticiel Puppeteer, nous découvrirons les étapes d'installation de Puppeteer avec ses dépendances telles que l'installation de NodeJs, l'installation de l'éditeur pour Puppeteer, etc. De plus, après l'installation, nous créerons et exécuterons un exemple de projet Puppeteer.
Installez Puppeteer
Pour démarrer le développement de scripts Puppeteer, nous devons installer et configurer les composants ci-dessous -
1. Installez NodeJS
2. Installez l'éditeur
3. Installez Puppeteer
Installez NodeJS:
NodeJs est un environnement de serveur open source gratuit qui peut être exécuté sur différentes plates-formes. Il utilise javascript côté serveur. Le Puppeteer est un type d'application NodeJS. La première étape de la configuration de Puppeteer consiste donc à installer le framework NodeJS. Le framework NodeJS est disponible pour plusieurs plates-formes, dont Windows, Ubuntu, macOS, etc. Dans ce contexte, nous travaillerons sur la version pour le système d'exploitation Windows 64 bits. Les étapes pour installer NodeJS sont:
Étape 1 # Téléchargez NodeJS: Cliquez ici pour naviguer dans le lien de téléchargement NodeJS. Ici, nous allons télécharger le programme d'installation de Windows 64 bits (.mts).
Étape 2# Installez NodeJS: Une fois le téléchargement terminé, nous devons installer NodeJs en double-cliquant sur le fichier d'installation (.msi). Lors de l'installation, nous devons procéder selon les instructions.
Étape 3# Vérifiez NodeJS: Une fois l'installation terminée, nous devons ouvrir l'invite de commande et entrer la commande en tant que «nœud». Si les détails ci-dessous apparaissent, l'installation est correcte. Si une erreur apparaît, cela signifie que l'installation n'est pas correcte.
Installez l'éditeur pour Puppeteer:
Un éditeur n'est rien d'autre qu'un outil qui nous aide à écrire, compiler et exécuter nos codes Puppeteer. De nombreux outils sont disponibles et peuvent être utilisés comme éditeur de code Java, notamment Visual Studio Code, Note Pad ++, Edit Plus, etc. Nous pouvons également écrire du code de marionnettiste dans l'application "Note Pad" par défaut. Dans ce "Installer Puppeteer" tutoriel, nous utiliserons VSCode car il est gratuit et facilement compatible avec l'application NodeJS. VSCode n'est rien d'autre qu'un composant de Visual Studio, qui est disponible gratuitement. Les étapes pour installer VSCode sont -
Étape 1 # Downloadd VSCode: Cliquez ici pour ouvrir le lien de téléchargement et télécharger la version désirée de VSCode Installer selon le système d'exploitation.
Étape 2 # Installez VSCode: Installez VSCode à partir du fichier d'installation dans le système comme tout autre logiciel. Pendant l'installation, procédez uniquement au réglage recommandé.
Étape 2 # Vérifiez VSCode: Une fois l'installation terminée, ouvrez l'application pour vérifier si elle est correctement installée.
Installez les packages Puppeteer:
À partir de la version v1.7.0 de puppeteer, chaque version contient ci-dessous deux packages -
- paquet puppeteer-core
- forfait marionnettiste
Les deux versions de Puppeteer peuvent être installées à l'aide des commandes de la console. Les commandes pour installer Puppeteer sont -
Installez le package Puppeteer-core: C'est une collection de bibliothèques Node JS qui est développée en Java. Il a la capacité de fonctionner sur le protocole devtools. Le navigateur Chromium n'est pas téléchargé lors de l'installation du package puppeteer-core. L'interface programmatique de Puppeteer pilote complètement la bibliothèque Puppeteer-Core. Une autre limitation importante est que les fonctionnalités du marionnettiste ne peuvent être modifiées en changeant aucune des variables d'environnement PUPPETEER_ *.
Commande d'installation: npm installer puppeteer-core
Remarque: L'outil Node JS doit être installé avant d'installer le package puppeteer-core.
Installez le package de produit Puppeteer: Puppeteer est le produit complet développé par Google pour contrôler les navigateurs Chrome. Étant le package complet du produit Puppeteer, les dernières versions du navigateur Chrome sont téléchargées lors de l'installation. Après cela, l'installation est pilotée par le marionnettiste-core. Il est possible de personnaliser les fonctionnalités de Puppeteer en modifiant les variables d'environnement PUPPETEER_*.
Commande d'installation: npm installer marionnettiste
Dans ce tutoriel «Installer Puppeteer», nous travaillerons sur l'installation du package Puppeteer car il n'y a pas beaucoup de différences entre ces deux versions.
Exemple de projet de marionnettiste
Le marionnettiste est compatible avec les navigateurs chromés avec tête (sans tête) et sans tête. En cas de headless, les activités du navigateur sont effectuées en arrière-plan, c'est-à-dire que l'interface utilisateur du navigateur ne nous est pas visible. Cela rend la chose (contrôler le navigateur) plus simple et plus facile en une seule étape. Cela signifie que la même chose (contrôler les navigateurs) peut être effectuée en plusieurs étapes complexes.
Les étapes impliquées dans la configuration de l'exemple de projet Puppeteer sont indiquées ci-dessous:
Étape 1 # Créez une structure de dossiers pour l'exemple de projet Puppeteer: Créez un exemple de répertoire racine avec le nom «SampleProject» dans un chemin prédéfini. Ce répertoire racine servira d'exemple de projet de marionnettiste. Ensuite, après avoir ouvert l'invite de commande, nous devons accéder à ce répertoire racine.
Étape 2 # Installez Puppeteer: En utilisant la commande ci-dessous, nous pouvons installer le package complet de Puppeteer dans le répertoire racine. Cette commande télécharge essentiellement toutes les bibliothèques NodeJS open-source dans le exemple de projet dossier. La procédure d'installation prend un certain temps en fonction de la vitesse du réseau. Il téléchargera environ 350 Mo de données. Après l'installation, le dossier node_modules, qui contient différents composants puppeteer et le fichier package-lock.json, sera créé dans le dossier racine du projet Pupeteer.
Étape 3 # Créer un exemple de script de marionnettiste: Maintenant, nous allons écrire un exemple de script de marionnettiste qui invoque les LambdaGeeks site Web, affiche les messages de la console après chaque étape et capture la capture d'écran. Dans cet exemple, un navigateur chrome sans tête sera appelé en arrière-plan. L'exemple de script de marionnettiste sera -
const marionnettiste = require('marionnettiste'); //inclure la bibliothèque Puppeteer puppeteer.launch({headless:true}).then(async browser => { const pageNew = wait browser.newPage(); // Lancer le navigateur console.log('Step1 - Open Browser'); / /Afficher le message wait pageNew .setViewport({ width: 1280, height: 800 }) wait pageNew .goto('https://techiescience.com/'); //Ouvrir LambdaGeeks //Capture d'écran wait pageNew .screenshot({ path : 'screenshot_lambda.png' }); console.log('Step2 - Naviguer dans LambdaGeeks et prendre une capture d'écran'); wait browser.close(); console.log('Step3 - Navigateur fermé'); });Ce code doit être stocké dans le répertoire racine du projet Sample puppeteer avec le nom de fichier exemple_script.js. Dans le cas de Puppeteer-core, nous devons inclure 'puppeteer-core' au lieu de 'puppeteer' au tout début du script. Pour un navigateur en tête, nous devons remplacer le code "{headless:true}” with “{headless:false}”.
Étape 4 # Exécuter un exemple de script de marionnettiste: L'exemple de script peut être exécuté à partir de l'invite de commande en utilisant la commande ci-dessous -
nœud npm sample_script.js
Après l'exécution, la capture d'écran sera capturée et stockée dans le répertoire racine sous le nom «'screenshot_lambda.png».
Nous allons maintenant montrer un autre exemple de script Puppeteer sur l'application Web Amazon. Ce script exécutera les étapes ci-dessous avec des vérifications à chaque étape -
- Appelez l'application Amazon.
- Recherchez un livre prédéfini.
- Ajoutez le livre recherché dans le panier.
- Ouvrez le panier et vérifiez si le livre est disponible dans le panier.
- Capturez l'écran et fermez le navigateur.
Nous allons seulement parcourir le script ci-dessous. Nous apprendrons en détail les différentes étapes à effectuer dans le prochain article. L'exemple de script est illustré ci-dessous -
/**
* Recherche @name sur Amazon
*/
const marionnettiste = require('marionnettiste');
const reportPathDir = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\';
const capture d'écranFile = 'screen1.png';
essayer {
(asynchrone () => {
\t//Créez une instance de navigateur et d'objet de page et accédez à l'URL
const browserWeb = wait puppeteer.launch({ headless : false });
const pageWeb = attendre navigateurWeb.newPage()
wait pageWeb.setViewport({ largeur : 1280, hauteur : 800 });
attendre pageWeb.goto('https://www.amazon.in/');
\t
\t//Entrez les critères de recherche amazon
\tlet searchBoxAmazon = wait pageWeb.waitForXPath("//*/input[@id='twotabsearchtextbox']",{ visible: true });
\tif (searchBoxAmazon === null)
\t{
\t\tconsole.log('L'écran Amazon ne s'affiche pas');
\t}
\telse{\t\t
\t\tawait searchBoxAmazon.type("Livre de tests");
\t\tconsole.log('Les critères de recherche ont été saisis');
\t} \t\t
\t
\t//Clic sur le bouton de recherche
\tlet btnSearchAmazon = wait pageWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visible : true });
\tif (btnSearchAmazon === null)
\t{
\t\tconsole.log('Le bouton de recherche ne s'affiche pas');
\t}
\tels{
\t\tawait btnSearchAmazon.click();
\t\tconsole.log('Clic sur le bouton de recherche');
\t}\t
\t
\t//Cliquez sur un résultat de recherche spécifique
\tlet myBookAmazon = wait pageWeb.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visible : true })
\tif (monLivreAmazon === null)
\t{
\t\tconsole.log('Le livre n'est pas disponible');
\t}
\tels{
\t\tattendez monBookAmazon.click();
\t\tconsole.log('Cliquez sur un livre spécifique pour commander');
\t} \t
\t
\t// Identifier si le nouvel onglet s'est ouvert
\tconst pageTarget = pageWeb.target();
\tconst newTarget = wait browserWeb.waitForTarget(target => target.opener() === pageTarget);
\t//récupère le nouvel objet page :
\tconst page2 = attendre newTarget.page();\t
\tawait page2.setViewport({ largeur : 1280, hauteur : 800 });
\t
\t//Ajouter au panier
\tlet addToCartAmazon = wait page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible : true });
\tif (addToCartAmazon === null)
\t{
\t\tconsole.log('Le bouton Ajouter au panier n'est pas disponible');
\t}
\tels{
\t\tconsole.log('Cliquez sur le bouton Ajouter au panier');
\t\tawait addToCartAmazon.click();\t\t
\t} \t\t
\t//Vérifier le processus d'ajout au panier\t
\tlet successMessageAmazon = wait page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true });
\tif (successMessageAmazon === null)
\t{
\t\tconsole.log('L'article n'est pas ajouté au panier');
\t}
\tels{
\t\tconsole.log('L'article a été ajouté au panier avec succès');\t\t
\t} \t
\t
\t// Capturer le numéro du panier
\tlet cartCountAmazon = wait page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true});
\tlet valueCount = wait page2.evaluate(el => el.textContent, cartCountAmazon)
\tconsole.log('Nombre de paniers : ' + valueCount);
\tcartCountAmazon.focus();
\tawait page2.screenshot({ chemin : capture d'écranFile });
\t
\tawait pageWeb.waitForTimeout(3000);
\tawait page2.close();
\tawait pageWeb.close();
attendre navigateurWeb.close();
})()
} attraper (e) {
console.log(e)
}Remarque: Nous expliquerons les étapes détaillées pour écrire des scripts dans les prochains articles.
Conclusion:
Dans cet article d'introduction sur «Installer Puppeteer» du «Tutoriel Puppeteer», nous avons expliqué les étapes détaillées pour installer différents packages Puppeteer à partir de zéro. La configuration de marionnettiste comprend différentes installations de composants telles que l'installation de NodeJs, l'installation de VSCode, l'installation de Puppeteer, la création et l'exécution d'un exemple de projet Puppeteer. Dans le prochain didacticiel Puppeteer, nous expliquerons les étapes détaillées pour utiliser le Puppeteer comme outil de scraping Web. Cliquez s'il vous plait ici à lire à partir du portail de référence.
Bonjour, je m'appelle K. Mondal, je suis associé à une organisation leader. J'ai plus de 12 ans d'expérience professionnelle dans des domaines tels que le développement d'applications, les tests d'automatisation, le consultant informatique. Je suis très intéressé par l'apprentissage de différentes technologies. Je suis ici pour réaliser mon aspiration et je contribue actuellement en tant qu'auteur et développeur de sites Web à LambdaGeeks.
Connectons-nous via LinkedIn-
