Test d'automatisation du marionnettiste - Un excellent guide du didacticiel du marionnettiste 6

Test d'automatisation du marionnettiste - Image de la fonction

Le Puppeteer est un framework basé sur une bibliothèque node js qui est disponible en open-source. Il peut être utilisé pour les outils de web scraping. Il est également utilisé pour les outils d'automatisation des tests. 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

Tutoriel Tosca # 6: Test d'automatisation des marionnettistes

Dans ce didacticiel «Puppeteer Automation Testing», nous expliquerons les étapes détaillées de Puppeteer Automation depuis le début. Les fonctionnalités ci-dessous seront expliquées pour comprendre les tests d'automatisation de Puppeteer à partir de zéro -

· Installer Puppeteer

· Lancer l'application Web

· Identifier les propriétés des objets à partir du navigateur Chrome

· Étapes de soumission de formulaire - Entrez du texte, cliquez sur l'événement, vérification

· Capture d'écran

· Exécuter des scripts pour Puppeteer Automation

Automatisation des marionnettistes

Des tests sont nécessaires pour garantir la qualité des produits logiciels. Il existe plusieurs niveaux de test définis dans les processus de développement logiciel. Pour tester les fonctionnalités d'un logiciel, peut être fait manuellement ou via un processus automatisé. Les principaux objectifs des tests logiciels automatisés sont:

  • Cycle d'exécution de test rapide.
  • Évitez les risques d'erreurs humaines.
  • Réduisez le temps d'exécution des tests.
  • Réduisez le temps de cycle de libération.
  • Couvrez plus de fonctionnalités sans compromettre la qualité.
  • Des exécutions multiples peuvent être effectuées en parallèle.

 Puppeteer est une bibliothèque de nœuds basée sur javascript qui fournit une interface d'application (API) de haut niveau pour contrôler le navigateur Web Chrome via le protocole Chrome DevTools. La plupart des opérations manuelles effectuées dans le navigateur Chrome peuvent être automatisées à l'aide de Puppeteer. Ainsi, le Puppeteer est un bon choix pour les tests unitaires sur les applications Web de manière rapide et simple. 

Approche de test d'automatisation du marionnettiste:

Les étapes impliquées dans les tests d'automatisation des marionnettistes sont expliquées ci-dessous - 

Étape 1 # Identifier le scénario de test fonctionnel:

Nous allons montrer l'approche étape par étape pour effectuer l'automatisation de marionnettiste pour le scénario ci-dessous - 

· Lancez le navigateur Web.

· Appelez l'application Web Amazon.

  • Recherchez le livre «Testing Book».
  • Ajoutez le livre dans le panier à partir du résultat.
  • Ouvrez le panier et vérifiez si le livre est disponible dans le panier.
  • Capturez l'écran et fermez le navigateur.

Étape 2 # Installez Puppeteer et créez un scénario de test:

Créez un fichier javascript vide comme "sample_script.js" dans un dossier spécifique. Ici, nous considérerons le dossier racine comme SampleProject. Pour installer Puppeteer, nous utiliserons la commande - «npm install puppeteer». 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 d'exemple Puppeteer.

Étape 3 # Capturer les propriétés d'identification de l'objet de test:

Nous pouvons capturer les propriétés d'identification à l'aide de l'outil de développement du navigateur Web Chrome. En analysant les différentes propriétés telles que, id, nom, XPath, etc., nous choisirons la bonne qui peut être utilisée dans le script pour effectuer toutes les opérations. Dans ce didacticiel «Puppeteer Automation Testing», nous utiliserons XPath dans le script. Ci-dessous les étapes à suivre pour obtenir le XPATH ou toute autre propriété,

1. Ouvrez les outils de développement disponibles sous «Menu -> Plus d'outils» et allez dans l'onglet Éléments.

2. À l'aide de l'outil Finder (en cliquant sur l'icône en forme de flèche disponible dans le coin supérieur gauche de l'onglet Éléments), sélectionnez l'objet de test à partir de l'application. Ici, nous allons inspecter le champ de recherche.

Test d'automatisation de marionnettiste - Ouvrez l'outil de développement Chrome
Test d'automatisation de marionnettiste - Ouvrez l'outil de développement Chrome

3. Analysez le code source en surbrillance pour identifier les propriétés souhaitées. Pour obtenir la propriété XPATH de l'objet de test, faites un clic droit sur la section en surbrillance et cliquez sur «Copier-> Copier Xpath» pour copier la propriété XPATH dans le presse-papiers.

Test d'automatisation de marionnettiste - Copier XPath
Test d'automatisation de marionnettiste - Copier XPath

4. Maintenant, collez le Xpath dans la zone de texte du Finder et appuyez sur Entrée pour vérifier si Xpath identifie l'objet de manière unique.

Test d'automatisation du marionnettiste - Vérifier XPath
Test d'automatisation du marionnettiste - Vérifier XPath

5. De même, nous devons également capturer les propriétés d'identification d'un autre objet de test.

Étape 4 # Étapes de développement de l'automatisation de marionnettiste:

Afin de terminer le scénario de test, nous devons effectuer certaines opérations sur les pages Web. Pour chacune des opérations, différentes méthodes sont disponibles. Les méthodes utilisées dans notre scénario pour «Test d'automatisation de marionnettiste» sont expliquées ici.

Lancer l'application - Après avoir inclus le marionnettiste, nous devons lancer le navigateur en utilisant la méthode de lancement du marionnettiste. Une référence d'objet peut être transmise à cette méthode pour définir un navigateur sans tête ou avec en-tête. Ensuite, nous devons créer l'instance du navigateur Web qui est nécessaire pour naviguer dans l'URL. Ici, la fonction async est utilisée pour utiliser le mot clé await pour gérer le synchroniseur Web.

//Include the puppeteer package
const puppeteer = require('puppeteer'); 
 (async () => {
    //launching the headless browser
    const browser = await puppeteer.launch({ headless: true });
   //Create instance of the browser
    const page = await browser.newPage();
   //Navigate to the url
    await page.goto('https://www.amazon.in/');
  })()

L'ensemble du test sera effectué dans un navigateur sans tête. Si nous voulons ouvrir le navigateur en-tête, nous devons passer l'objet à la méthode de lancement comme "{Headless: false}".

Vérifiez l'existence - Nous devons utiliser la méthode page.waitForXpath qui vérifiera l'existence de l'Xpath et retournera la référence de l'objet de test. En testant la référence de retour, nous pouvons ajouter un point de vérification dans le cas de test.

	let searchBox = await page.waitForXPath("//*[@id='twotabsearchtextbox']",{ visible: true });
	if (searchBox === null) //Verification of the test object
	{
		console.log('Amazon screen is not displayed');
	}

Entrer des données - En utilisant le type méthode de cette référence d'objet, nous pouvons entrer le texte.

await searchBox.type("Testing Book");

Cliquez sur Élément  - De même, en utilisant le cliquez méthode de toute référence d'objet, nous pouvons effectuer des opérations de clic.

let btnSearch = await page.waitForXPath("//*/input[@id='nav-search-submit-button']",{visible:true });
btnSearch.click();

Imprimer le message dans la console  - Utilisation de la méthode console.log, nous pouvons imprimer n'importe quel message de la console en sortie.

console.log(‘Console lag has been generated’);

Reportez-vous au nouvel onglet - Utilisation des méthodes page.target et browser.waitforTarget, nous pouvons vérifier et stocker la référence sur le nouvel onglet dans une variable.

	const pageTarget = page.target();
	const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget);
	//get the new page object:
	const page2 = await newTarget.page();

Capturer Capture d'écran - Utilisation de la méthode page. Capture d'écran, un instantané de la page particulière a été pris et sauvegardé selon le nom de fichier fourni comme argument.

await page.screenshot({ path: ‘screenshot1.png’ });

Fermer la page et le navigateur - Utilisation de la méthode close, nous pouvons fermer à la fois la page Web et le navigateur.

	await page.close();
	await browser.close();

Temps d'attente - Dans certains cas, il est nécessaire d'attendre le chargement de la page ou la fin de toute tâche dépendante; nous devons suspendre l'exécution pendant une durée prédéfinie. Pour ce faire, nous pouvons utiliser la page.waitForTimeout méthode qui peut interrompre l'exécution en fonction de la valeur (en mili-secondes) passée par l'argument.

await page.waitForTimeout(2000);

Nous avons maintenant appris les étapes techniques de base pour automatiser notre scénario fonctionnel. Sur la base des connaissances, nous pouvons passer par le cas de test Puppeteer Automation ci-dessous. L'aperçu détaillé des classes et méthodes les plus fréquemment utilisées sera expliqué dans les articles suivants.

/**
 * @name Amazon search
 */
const puppeteer = require('puppeteer');
const reportPath = 'C:\\LambdaGeeks\\puppteer_proj_sample\\output\\';
const screenshot = 'screen1.png';
// Used to export the file into a .docx file
try {
  (async () => {
    const browser = await puppeteer.launch({ headless: false });
    const pageNew = await browser.newPage()
    await pageNew.setViewport({ width: 1280, height: 800 });
    await pageNew.goto('https://www.amazon.in/');
	//Enter Search criteria
	let searchBox = await page.waitForXPath("//*[@id='twotabsearchtextbox']",{ visible: true });
	if (searchBox === null)
	{
		console.log('Amazon screen is not displayed');
	}
	else{		
		await searchBox.type("Testing Book");
		console.log('Search criteria has been entered');
	} 		
	//Clicked on search button
	let btnSearch = await pageNew.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visible: true });
	if (btnSearch === null)
	{
		console.log('Search button is not showing');
	}
	else{
		await btnSearch.click();
		console.log('Clicked on search button');
	}	
	//Click on specific search result
	let myBook = await pageNew.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visible: true })
	if (myBook === null)
	{
		console.log('Book is not available');
	}
	else{
		await myBook.click();
		console.log('Click on specific book to order');
	} 	
	// Identify if the new tab has opened
	const pageTarget = pageNew.target();
	const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget);
	//get the new page object:
	const page2 = await newTarget.pageNew();	
	await page2.setViewport({ width: 1280, height: 800 });
	
	//Add to cart
	let addToCart = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true });
	if (addToCart === null)
	{
		console.log('Add to cart button is not available');
	}
	else{
		console.log('Click on add to Cart button');
		await addToCart.click();		
	} 		
	//Verify add to cart process	
	let successMessage = await page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true });
	if (successMessage === null)
	{
		console.log('Item is not added to cart');
	}
	else{
		console.log('Item is added to cart successfully');		
	} 		
	// Capture no of cart
	let cartCount = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true});
	let value = await page2.evaluate(el => el.textContent, cartCount)
	console.log('Cart count: ' + value);
	cartCount.focus();
	await page2.screenshot({ path: screenshot });
	
	await pageNew.waitForTimeout(2000);    
	await page2.close();
	await pageNew.close();
    await browser.close();
  })()
} catch (err) {
  console.error(err)
}

Étape 5 # Exécution du test d'automatisation du marionnettiste:

Nous pouvons lancer l'exécution à l'aide de la commande noeud sample_script.js via l'invite de commande. Lors de l'exécution, le navigateur Chromium sera ouvert et exécutera automatiquement les étapes fonctionnelles et stockera la capture d'écran de la page finale. La capture d'écran et la sortie de la console ressembleront à ci-dessous.

Test d'automatisation du marionnettiste - Sortie de la console
Test d'automatisation du marionnettiste - Sortie de la console
Test d'automatisation du marionnettiste - Écran capturé
Test d'automatisation du marionnettiste - Écran capturé

Conclusion:

Tout au long de ce didacticiel de test d'automatisation de marionnettiste, nous avons appris les étapes détaillées des tests d'automatisation de marionnettiste. Dans le prochain didacticiel Marionnettiste, nous en apprendrons davantage sur la présentation détaillée des classes et méthodes de marionnettistes les plus fréquemment utilisées. Cliquez s'il vous plait ici pour visiter le portail de référence de ce didacticiel de marionnettiste. 

À 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