Puppeteer is een open-source node js-bibliotheek die kan worden gebruikt voor webscraping-tools. Het kan ook worden gebruikt om testautomatisering uit te voeren in webapplicaties. Tegenwoordig wordt het gebruik van Puppeteer snel verhoogd in de geautomatiseerde software-testruimte. Basiskennis van de opdrachtregel, Javascript en HTML DOM-structuur is vereist om de zelfstudie voor poppenspelers te begrijpen. De volledige tutorial is onderverdeeld in de onderstaande artikelen.
Puppeteer-zelfstudie
Tosca Tutorial # 1: Poppenspeler Overzicht
Tosca Tutorial # 2: Poppenspeler omgevingsvariabelen
Tosca Tutorial # 3: Puppeteer Web Scraping en Puppeteer Test Automation Overzicht
Tosca Tutorial # 4: Installeer Puppeteer
Tosca Tutorial # 5: Voorbeeld van een poppenspelerproject
In deze Puppeteer-zelfstudie leren we de stappen om Puppeteer te installeren met zijn afhankelijkheden, zoals het installeren van NodeJs, het installeren van de editor voor Puppeteer, enz. Ook zullen we na de installatie een voorbeeld van een Puppeteer-project maken en uitvoeren.
Installeer Puppeteer
Om de ontwikkeling van Puppeteer-scripts te starten, moeten we de onderstaande componenten installeren en configureren -
1. Installeer NodeJS
2. Installeer Editor
3. Installeer Puppeteer
Installeer NodeJS:
NodeJs is een gratis open source serveromgeving die op verschillende platforms kan worden uitgevoerd. Het gebruikt javascript aan de serverzijde. De Puppeteer is een soort NodeJS-applicatie. Dus de eerste stap van Puppeteer-installatie is het installeren van het NodeJS-framework. Het NodeJS-framework is beschikbaar voor meerdere platforms, waaronder Windows, Ubuntu, macOS, etc. In deze context zullen we werken aan de versie voor 64 bit Windows-besturingssysteem. De stappen om NodeJS te installeren zijn -
Step1 # Download NodeJS: Klik hier om door de NodeJS-downloadlink te navigeren. Hier zullen we het 64-bits Windows-installatieprogramma (.mts) downloaden.
Stap 2# Installeer NodeJS: Nadat de download is voltooid, moeten we NodeJs installeren door te dubbelklikken op het installatiebestand (.msi). Tijdens de installatie moeten we doorgaan volgens de instructies.
Stap 3# Controleer NodeJS: Nadat de installatie is voltooid, moeten we de opdrachtprompt openen en de opdracht invoeren als "knooppunt". Als de onderstaande details verschijnen, is de installatie correct. Als er een fout optreedt, betekent dit dat de installatie niet correct is.
Installeer Editor voor Puppeteer:
Een editor is niets anders dan een tool die ons helpt bij het schrijven, compileren en uitvoeren van onze Puppeteer-codes. Er zijn veel tools beschikbaar die kunnen worden gebruikt als een java-code-editor, waaronder Visual Studio Code, Note Pad ++, Edit Plus, enz. Zelfs wij kunnen poppenspelercode schrijven in de standaard "Note Pad" -toepassing. In deze "Puppeteer installeren" zelfstudie, zullen we VSCode gebruiken omdat het gratis is en gemakkelijk compatibel is met NodeJS Application. VSCode is niets anders dan een onderdeel van visual studio, dat gratis beschikbaar is. Stappen om VSCode te installeren zijn:
Step1 # Downloadd VSCode: Klik hier om de downloadlink te openen en de gewenste versie van VSCode Installer te downloaden volgens het besturingssysteem.
Stap2 # Installeer VSCode: Installeer VSCode vanuit het installatiebestand in het systeem, net als elke andere software. Ga tijdens de installatie alleen verder met de aanbevolen instelling.
Stap2 # Verifieer VSCode: Open na voltooiing van de installatie de applicatie om te controleren of deze correct is geïnstalleerd.
Installeer Puppeteer-pakketten:
Vanaf de versie v1.7.0 van poppenspeler bevat elke uitgave hieronder twee pakketten -
- poppenspeler-kernpakket
- poppenspeler pakket
Beide versies van Puppeteer kunnen worden geïnstalleerd met behulp van de console-opdrachten. De commando's om Puppeteer te installeren zijn -
Installeer het Puppeteer-core-pakket: Het is een verzameling Node JS-bibliotheek die is ontwikkeld in Java. Het heeft de mogelijkheid om te werken met het devtools-protocol. De Chromium-browser wordt niet gedownload tijdens het installeren van het puppeteer-core-pakket. De programmatische interface van Puppeteer stuurt de kernbibliotheek van de poppenspeler volledig aan. Een andere belangrijke beperking is dat de kernfuncties van de poppenspeler niet kunnen worden gewijzigd door een van de PUPPETEER_ * omgevingsvariabelen te wijzigen.
Installatieopdracht: npm installeer poppenspeler-kern
Opmerking: De Node JS-tool moet worden geïnstalleerd voordat het puppeteer-core-pakket wordt geïnstalleerd.
Installeer het productpakket van Puppeteer: Puppeteer is het complete product dat door Google is ontwikkeld om de Chrome-browsers te besturen. Omdat het het complete Puppeteer-productpakket is, worden de nieuwste versies van de Chrome-browser gedownload tijdens de installatie. Daarna wordt de installatie aangestuurd door poppenspelerkern. Het is mogelijk om de Puppeteer-functies aan te passen door de PUPPETEER_* omgevingsvariabelen te wijzigen.
Installatieopdracht: npm poppenspeler installeren
In deze tutorial “Install Puppeteer” zullen we werken aan de installatie van het Puppeteer-pakket, aangezien er niet veel verschillen zijn tussen deze twee versies.
Voorbeeld van een poppenspelerproject
De poppenspeler is compatibel met zowel headful (niet-headless) als headless chromen browsers. In het geval van headless worden de browseractiviteiten op de achtergrond uitgevoerd, dwz de browser-UI is niet zichtbaar voor ons. Het maakt het ding (het besturen van de browser) eenvoudiger en gemakkelijker in één stap. Het betekent dat hetzelfde (het besturen van de browsers) kan worden gedaan met meerdere complexe stappen.
De stappen die betrokken zijn bij het opzetten van een voorbeeld van een Puppeteer-project worden hieronder weergegeven -
Stap1 # Maak een mapstructuur voor Sample Puppeteer Project: Maak een voorbeeldhoofdmap met de naam "SampleProject" in een vooraf gedefinieerd pad. Deze root-directory zal fungeren als een voorbeeldpoppenspelerproject. Vervolgens moeten we na het openen van de opdrachtprompt naar deze hoofdmap gaan.
Stap2 # Installeer poppenspeler: Met behulp van het onderstaande commando kunnen we het volledige Puppeteer-pakket in de hoofdmap installeren. Deze opdracht downloadt in feite alle open-source NodeJS-bibliotheken in het voorbeeldproject map. De installatieprocedure neemt enige tijd in beslag, afhankelijk van de netwerksnelheid. Het zal ongeveer 350 MB aan gegevens downloaden. Na de installatie wordt de map node_modules, die verschillende poppenspeler-componenten en package-lock.json-bestand bevat, aangemaakt in de hoofdmap van het voorbeeld van het Pupeteer-project.
Step3 # Maak een voorbeeld van een poppenspelerscript: Nu zullen we een voorbeeld van een poppenspelerscript schrijven dat oproept de LambdaGeeks website, toont consoleberichten na elke stap en legt de schermafbeelding vast. In dit voorbeeld wordt een headless chromium-browser op de achtergrond aangeroepen. Het voorbeeld van Puppeteer Script zal zijn -
const poppenspeler = vereisen('poppenspeler'); //include Puppeteer Library puppeteer.launch({headless:true}).then(async browser => { const pageNew = wacht op browser.newPage(); // Start browser console.log('Step1 - Browser openen'); / /Bericht weergeven wacht op paginaNieuw .setViewport({ breedte: 1280, hoogte: 800 }) wacht op paginaNieuw .goto('https://techiescience.com/'); //Open LambdaGeeks //Capture Screenshot wacht op paginaNieuw .screenshot({ pad : 'screenshot_lambda.png' }); console.log('Stap2 - Navigeer door LambdaGeeks en maak een screenshot'); wacht op browser.close(); console.log('Step3 - Browser gesloten'); });Deze code moet met de bestandsnaam worden opgeslagen in de hoofdmap van het Sample poppenspelerproject voorbeeld_script.js In het geval van Puppeteer-core, moeten we 'puppeteer-core' in plaats van 'puppeteer' helemaal aan het begin van het script opnemen. Voor headful browser moeten we de code "{headless:true}” with “{headless:false}”.
Stap4 # Voorbeeld-poppenspelerscript uitvoeren: Het voorbeeldscript kan worden uitgevoerd vanaf de opdrachtprompt met behulp van de onderstaande opdracht -
npm-knooppunt sample_script.js
Na de uitvoering wordt het screenshot vastgelegd en opgeslagen in de root-directory als "'screenshot_lambda.png".
Nu zullen we een ander voorbeeld van een Puppeteer-script laten zien op de Amazon-webapplicatie. Dit script voert de onderstaande stappen uit, samen met verificaties in elke stap:
- Roep de Amazon-applicatie op.
- Zoek een voorgedefinieerd boek.
- Voeg het gezochte boek toe aan de winkelwagen.
- Open de winkelwagen en controleer of het boek beschikbaar is in de winkelwagen.
- Capture-scherm en sluit de browser.
We zullen alleen het onderstaande script doorlopen. In het volgende artikel zullen we in detail leren over de verschillende stappen die we moeten uitvoeren. Het voorbeeldscript wordt hieronder weergegeven -
/**
* @naam Zoeken in Amazon
*/
const poppenspeler = vereisen('poppenspeler');
const reportPathDir = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\';
const screenshotFile = 'scherm1.png';
poging {
(asynchrone () => {
\t//Maak een browser- en paginaobjectinstantie en navigeer naar de URL
const browserWeb = wacht op poppenspeler.launch({ headless: false });
const pageWeb = wacht op browserWeb.newPage()
wacht op pageWeb.setViewport({ breedte: 1280, hoogte: 800 });
wacht op paginaWeb.goto('https://www.amazon.in/');
\T
\t//Voer de Amazon-zoekcriteria in
\tlet searchBoxAmazon = wacht op pageWeb.waitForXPath("//*/input[@id='twotabsearchtextbox']",{ zichtbaar: true });
\tif (zoekboxAmazon === nul)
\T{
\t\tconsole.log('Amazon-scherm wordt niet weergegeven');
\T}
\telse{\t\t
\t\tawait searchBoxAmazon.type("Testboek");
\t\tconsole.log('Zoekcriteria zijn ingevoerd');
\t} \t\t
\T
\t//Op de zoekknop geklikt
\tlet btnSearchAmazon = wacht op pageWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{ zichtbaar: true });
\tif (btnSearchAmazon === nul)
\T{
\t\tconsole.log('Zoekknop wordt niet weergegeven');
\T}
\telse{
\t\tawait btnSearchAmazon.klik();
\t\tconsole.log('Op de zoekknop geklikt');
\t}\t
\T
\t//Klik op een specifiek zoekresultaat
\tlet myBookAmazon = wacht op pageWeb.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ zichtbaar: true })
\tif (mijnBookAmazon === null)
\T{
\t\tconsole.log('Boek is niet beschikbaar');
\T}
\telse{
\t\wacht op mijnBookAmazon.klik();
\t\tconsole.log('Klik op een specifiek boek om te bestellen');
\t} \t
\T
\t// Bepaal of het nieuwe tabblad is geopend
\tconst paginaTarget = paginaWeb.target();
\tconst newTarget = wacht op browserWeb.waitForTarget(target => target.opener() === pageTarget);
\t//haal het nieuwe paginaobject op:
\tconst pagina2 = wacht op nieuweTarget.page();\t
\tawait page2.setViewport({ breedte: 1280, hoogte: 800 });
\T
\t//Voeg toe aan winkelwagen
\tlet addToCartAmazon = wacht op pagina2.waitForXPath("//*/input[@id='add-to-cart-button']",{ zichtbaar: true });
\tif (addToCartAmazon === null)
\T{
\t\tconsole.log('De knop Toevoegen aan winkelwagen is niet beschikbaar');
\T}
\telse{
\t\tconsole.log('Klik op de knop Toevoegen aan winkelwagen');
\t\tawait addToCartAmazon.click();\t\t
\t} \t\t
\t//Controleer het toevoegen aan winkelwagenproces\t
\tlet successMessageAmazon = wacht op pagina2.waitForXPath("//*[contains(text(),'Toegevoegd aan winkelwagen')]",{ zichtbaar: true });
\tif (succesMessageAmazon === null)
\T{
\t\tconsole.log('Item is niet aan winkelwagen toegevoegd');
\T}
\telse{
\t\tconsole.log('Item is succesvol aan winkelwagen toegevoegd');\t\t
\t} \t
\T
\t// Leg het aantal winkelwagens vast
\tlet cartCountAmazon = wacht op pagina2.waitForXPath("//*/span[@id='nav-cart-count']",{ zichtbaar: true});
\tlet valueCount = wacht op pagina2.evaluate(el => el.textContent, cartCountAmazon)
\tconsole.log('Aantal winkelwagens: ' + valueCount);
\tcartCountAmazon.focus();
\tawait page2.screenshot({ pad: screenshotFile });
\T
\tawait-paginaWeb.waitForTimeout(3000);
\tawacht op pagina2.close();
\tawait pageWeb.close();
wacht op browserWeb.close();
})()
} vangst (e) {
console.log(e)
}Opmerking: We zullen de detailstappen om scripts te schrijven in de volgende artikelen uitleggen.
Conclusie:
In dit inleidende artikel over "Installeer Puppeteer" uit de "Puppeteer Tutorial", hebben we uitgelegd hoe u de verschillende Puppeteer-pakketten helemaal opnieuw installeert. De poppenspeler-setup omvat verschillende componentinstallaties, zoals NodeJs installeren, VSCode installeren, Puppeteer installeren, Puppeteer-voorbeeldproject maken en uitvoeren. In de volgende Puppeteer-tutorial zullen we gedetailleerde stappen uitleggen om de Puppeteer te gebruiken als een webscraping-tool. Klik alstublieft hier om te lezen van referentieportaal.
Hallo, ik ben K. Mondal, ik ben verbonden aan een toonaangevende organisatie. Ik heb meer dan 12 jaar werkervaring in verschillende domeinen, bijvoorbeeld applicatieontwikkeling, automatiseringstesten en IT-consultant. Ik ben erg geïnteresseerd in het leren van verschillende technologieën. Ik ben hier om mijn ambitie te vervullen en draag momenteel bij als auteur en website-ontwikkelaar, zowel bij LambdaGeeks.
Laten we verbinding maken via LinkedIn-