Installer Puppeteer - Un excellent guide d'apprentissage du didacticiel Puppeteer 4 et 5

Tutoriel de marionnettiste - Image de vedette

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 allons apprendre les étapes pour installer 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 allons créer et exécuter 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). 

Tutoriel Puppeteer - Installer NodeJs
Tutoriel Puppeteer - Installer NodeJs

É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.

Tutoriel Puppeteer - Vérifier NodeJs
Tutoriel Puppeteer - Vérifier NodeJs

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. Il existe de nombreux outils disponibles qui peuvent être utilisés comme éditeur de code java qui inclut Visual Studio Code, Note Pad ++, Edit Plus, etc. Même nous pouvons également écrire du code de marionnettiste dans l'application par défaut «Note Pad». Dans ce didacticiel «Installer Puppeteer», 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.

Tutoriel Marionnettiste - Éditeur pour Marionnettiste
Tutoriel Marionnettiste - Éditeur pour Marionnettiste

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

Note : 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 puppeteer-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.

Tutoriel Marionnettiste - Journal d'installation
Tutoriel Marionnettiste - Journal d'installation

É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 puppeteer = require('puppeteer'); //include Puppeteer Library
 
puppeteer.launch({headless:true}).then(async browser => {
     const pageNew = await browser.newPage(); // Launch browser
     console.log('Step1 - Open Browser'); //Display message
     await pageNew .setViewport({ width: 1280, height: 800 })
     await pageNew .goto('https://lambdageeks.com/'); //Open LambdaGeeks
     //Capture Screenshot
     await pageNew .screenshot({ path: 'screenshot_lambda.png' });
     console.log('Step2 - Navigate LambdaGeeks and take screenshot');
     await browser.close();
     console.log('Step3 - Browser Closed');
 });

Ce code doit être stocké dans le répertoire racine du projet Sample puppeteer avec le nom de fichier sample_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 -

npm node 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».

Tutoriel Marionnettiste - Exemple de projet Marionnettiste
Tutoriel Marionnettiste - Exemple de projet Marionnettiste

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 -

/**
 * @name Search in Amazon
*/
const puppeteer = require('puppeteer');
const reportPathDir = 'C:\\LambdaGeeks\\puppteer_proj_sample\\output\\';
const screenshotFile = 'screen1.png';

try {
  (async () => {
    
	//Create browser and page object instance and navigate to the URL
    const browserWeb = await puppeteer.launch({ headless: false });
    const pageWeb = await browserWeb.newPage()
    await pageWeb.setViewport({ width: 1280, height: 800 });
    await pageWeb.goto('https://www.amazon.in/');
	
	//Enter the amazon Search criteria
	let searchBoxAmazon = await pageWeb.waitForXPath("//*/input[@id='twotabsearchtextbox']",{ visible: true });
	if (searchBoxAmazon === null)
	{
		console.log('Amazon screen is not displayed');
	}
	else{		
		await searchBoxAmazon.type("Testing Book");
		console.log('Search criteria has been entered');
	} 		
	
	//Clicked on search button
	let btnSearchAmazon = await pageWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visible: true });
	if (btnSearchAmazon === null)
	{
		console.log('Search button is not showing');
	}
	else{
		await btnSearchAmazon.click();
		console.log('Clicked on search button');
	}	
	
	//Click on specific search result
	let myBookAmazon = await pageWeb.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visible: true })
	if (myBookAmazon === null)
	{
		console.log('Book is not available');
	}
	else{
		await myBookAmazon.click();
		console.log('Click on specific book to order');
	} 	
	
	// Identify if the new tab has opened
	const pageTarget = pageWeb.target();
	const newTarget = await browserWeb.waitForTarget(target => target.opener() === pageTarget);
	//get the new page object:
	const page2 = await newTarget.page();	
	await page2.setViewport({ width: 1280, height: 800 });
	
	//Add to cart
	let addToCartAmazon = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true });
	if (addToCartAmazon === null)
	{
		console.log('Add to cart button is not available');
	}
	else{
		console.log('Click on add to Cart button');
		await addToCartAmazon.click();		
	} 		
	//Verify add to cart process	
	let successMessageAmazon = await page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true });
	if (successMessageAmazon === null)
	{
		console.log('Item is not added to cart');
	}
	else{
		console.log('Item is added to cart successfully');		
	} 	
	
	// Capture no of cart
	let cartCountAmazon = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true});
	let valueCount = await page2.evaluate(el => el.textContent, cartCountAmazon)
	console.log('Cart count: ' + valueCount);
	cartCountAmazon.focus();
	await page2.screenshot({ path: screenshotFile });
	
	await pageWeb.waitForTimeout(3000);    
	await page2.close();
	await pageWeb.close();
    await browserWeb.close();
  })()
} catch (e) {
  console.log(e)
}

Note : 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.

À propos de K Mondal

Bonjour, je suis K. Mondal, je suis associé à une organisation de premier plan. 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 en informatique. Je suis très intéressé par l'apprentissage de différentes technologies. Je suis ici pour répondre à mon aspiration et je contribue actuellement en tant qu'auteur et développeur de site Web à la fois dans LambdaGeeks.
Connectez-vous à LinkedIn - https://www.linkedin.com/in/kumaresh-mondal/

Laisser un commentaire

Votre adresse email n'apparaîtra pas. Les champs obligatoires sont marqués *

Geeks Lambda