The 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 grattage Web. Il est également utilisé pour les outils d'automatisation des tests. De nos jours, l'utilisation de Puppeteer augmente rapidement dans le domaine des tests de logiciels automatisés. Une connaissance de base de la ligne de commande, de Javascript et de la structure HTML DOM est requise pour comprendre tutoriel de 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.
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.
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.
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.
//Inclure le package marionnettiste const puppeteer = require('puppeteer'); (async () => { //lancement du navigateur sans tête const browser = await puppeteer.launch({ headless: true }); //Créer une instance du navigateur const page = await browser.newPage(); //Naviguer vers le url wait 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.
\tlet searchBox = wait page.waitForXPath("//*[@id='twotabsearchtextbox']",{ visible: true });
\tif (searchBox === null) //Vérification de l'objet de test
\t{
\t\tconsole.log('L'écran Amazon ne s'affiche pas');
\t}Entrer des données - En utilisant le type méthode de cette référence d'objet, nous pouvons entrer le texte.
wait searchBox.type("Livre de test");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.
laissez btnSearch = attendre 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('Le décalage de la console a été généré');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.
\tconst pageTarget = page.target(); \tconst newTarget = wait browser.waitForTarget(target => target.opener() === pageTarget); \t//récupère le nouvel objet page : \tconst page2 = attendre 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.
wait page.screenshot({ chemin : '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.
\tattendre page.close(); \tawait navigateur.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.
attendre 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.
/**
* Recherche @name Amazon
*/
const marionnettiste = require('marionnettiste');
const reportPath = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\';
const capture d'écran = 'screen1.png';
// Utilisé pour exporter le fichier dans un fichier .docx
essayer {
(asynchrone () => {
const navigateur = wait puppeteer.launch({ headless: false });
const pageNew = attendre le navigateur.newPage()
wait pageNew.setViewport({ largeur : 1280, hauteur : 800 });
attendre pageNew.goto('https://www.amazon.in/');
\t//Entrer les critères de recherche
\tlet searchBox = wait page.waitForXPath("//*[@id='twotabsearchtextbox']",{ visible: true });
\tif (searchBox === null)
\t{
\t\tconsole.log('L'écran Amazon ne s'affiche pas');
\t}
\telse{\t\t
\t\tawait searchBox.type("Livre de tests");
\t\tconsole.log('Les critères de recherche ont été saisis');
\t} \t\t
\t//Clic sur le bouton de recherche
\tlet btnSearch = wait pageNew.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visible: true });
\tif (btnRecherche === null)
\t{
\t\tconsole.log('Le bouton de recherche ne s'affiche pas');
\t}
\tels{
\t\tawait btnSearch.click();
\t\tconsole.log('Clic sur le bouton de recherche');
\t}\t
\t//Cliquez sur un résultat de recherche spécifique
\tlet myBook = wait pageNew.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visible : true })
\tif (monLivre === null)
\t{
\t\tconsole.log('Le livre n'est pas disponible');
\t}
\tels{
\t\tattendez monBook.click();
\t\tconsole.log('Cliquez sur un livre spécifique pour commander');
\t} \t
\t// Identifier si le nouvel onglet s'est ouvert
\tconst pageTarget = pageNew.target();
\tconst newTarget = wait browser.waitForTarget(target => target.opener() === pageTarget);
\t//récupère le nouvel objet page :
\tconst page2 = attendre newTarget.pageNew();\t
\tawait page2.setViewport({ largeur : 1280, hauteur : 800 });
\t
\t//Ajouter au panier
\tlet addToCart = wait page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible : true });
\tif (addToCart === 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 addToCart.click();\t\t
\t} \t\t
\t//Vérifier le processus d'ajout au panier\t
\tlet successMessage = wait page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true });
\tif (successMessage === 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 cartCount = wait page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true});
\tlet value = wait page2.evaluate(el => el.textContent, cartCount)
\tconsole.log('Nombre de paniers : ' + valeur);
\tcartCount.focus();
\tawait page2.screenshot({ chemin : capture d'écran });
\t
\tawait pageNew.waitForTimeout(2000);
\tawait page2.close();
\tawait pageNew.close();
attendre le navigateur.close();
})()
} attraper (erreur) {
console.erreur(erreur)
}É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.
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.
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-
