Installer Puppeteer - En fremragende læringsvejledning til Puppeteer Tutorial 4 & 5

Puppeteer er et open-source node js-bibliotek, der kan bruges til webskrabningsværktøjer. Det kan også bruges til at udføre testautomatisering i webapplikationer. Nu om dagen øges brugen af ​​Puppeteer hurtigt i det automatiserede softwaretestrum. Grundlæggende kendskab til kommandolinje, Javascript og HTML DOM-struktur er påkrævet for at forstå tutorialen til dukketeater. Hele vejledningen er adskilt i nedenstående artikler. 

Teatervejledning til dukkefører

Tosca Tutorial # 1: Puppeteer Oversigt

Tosca tutorial # 2: Variabler til dukketeatermiljø

Tosca tutorial # 3: Puppeteer Web Scraping og Puppeteer Test Automation Overview

Tosca tutorial # 4: Installer Puppeteer

Tosca tutorial # 5: Prøve dukketeaterprojekt

I denne Puppeteer-tutorial lærer vi om trinene til at installere Puppeteer med dets afhængigheder, såsom installation af NodeJs, installer editor for Puppeteer osv. Efter installationen vil vi også oprette og udføre et eksempel på Puppeteer-projekt.

Installer Puppeteer

For at starte udviklingen af ​​Puppeteer-scripts skal vi installere og konfigurere nedenstående komponenter - 

1. Installer NodeJS

2. Installer Editor

3. Installer Puppeteer

Installer NodeJS:

NodeJs er et gratis open source-servermiljø, som kan køres på forskellige platforme. Det bruger javascript på serversiden. Puppeteer er en slags NodeJS-applikation. Så det første trin i Puppeteer-opsætningen er at installere NodeJS-rammen. NodeJS-rammen er tilgængelig for flere platforme, inklusive Windows, Ubuntu, macOS osv. I denne sammenhæng vil vi arbejde på versionen til 64-bit Windows-operativsystem. Trin til installation af NodeJS er -

Trin1 # Download NodeJS: Klik link. for at navigere i linket til NodeJS-download. Her downloader vi 64 bit windows installationsprogrammet (.mts). 

Puppeteatervejledning - Installer NodeJs
Puppeteatervejledning - Installer NodeJs

Trin 2# Installer NodeJS: Efter afslutningen af ​​downloadet skal vi installere NodeJs ved at dobbeltklikke på installationsfilen (.msi). Under installationen skal vi fortsætte i henhold til instruktionerne.

Trin 3# Bekræft NodeJS: Efter afslutningen af ​​installationen skal vi åbne kommandoprompten og indtaste kommandoen som “node”. Hvis nedenstående detaljer vises, er installationen korrekt. Hvis der vises en fejl, betyder det, at installationen ikke er korrekt.

Puppeteatervejledning - Bekræft NodeJs
Puppeteatervejledning - Bekræft NodeJs

Installer Editor til Puppeteer:

En editor er intet andet end et værktøj, der hjælper os med at skrive, kompilere og køre vores Puppeteer-koder. Der er mange tilgængelige værktøjer, som kan bruges som en java-kodeeditor, som inkluderer Visual Studio Code, Note Pad ++, Edit Plus osv. Selv vi kan også skrive dukkeførerkode i standard "Note Pad"-applikationen. I denne "Installer Puppeteer" tutorial, vil vi bruge VSCode, da det er gratis og let kompatibelt med NodeJS Application. VSCode er intet andet end én komponent i Visual Studio, som er tilgængelig gratis. Trin til at installere VSCode er - 

Trin 1 # Downloadd VSCode: Klik link. for at åbne downloadlinket og downloade den ønskede version af VSCode Installer i henhold til operativsystemet.

Trin2 # Installer VSCode: Installer VSCode fra installationsfilen i systemet ligesom enhver anden software. Under installationen skal du kun fortsætte med den anbefalede indstilling.

Trin2 # Bekræft VSCode: Når installationen er afsluttet, skal du åbne applikationen for at kontrollere, om den er installeret korrekt.

Puppeteer tutorial - Editor til Puppeteer
Puppeteer tutorial - Editor til Puppeteer

Installer Puppeteer-pakker:

Fra version v1.7.0 af dukketeater indeholder hver udgivelse under to pakker -

  • dukkepakker
  • dukkepakke

Begge versioner af Puppeteer kan installeres ved hjælp af konsolkommandoer. Kommandoerne til installation af Puppeteer er - 

Installer Puppeteer-core Package: Det er en samling af Node JS-bibliotek, der er udviklet i Java. Det har evnen til at arbejde på devtools-protokol. Chromium-browseren downloades ikke, mens du installerer puppeteer-core-pakken. Den programmatiske grænseflade til Puppeteer driver fuldstændigt dukkebiblioteket. En anden vigtig begrænsning er, at dukkefunktionerne ikke kan ændres ved at ændre nogen af ​​PUPPETEER_ * miljøvariablerne. 

Installationskommando: npm installere puppeteer-core

Bemærk: Node JS-værktøjet skal installeres, før du installerer puppeteer-core-pakken.

Installer Puppeteer-produktpakke: Puppeteer er det komplette produkt, som er udviklet af Google til at styre Chrome-browsere. Da det er den komplette Puppeteer-produktpakke, downloades de seneste versioner af chromium-browseren under installationen. Derefter er installationen drevet af dukkespiller-kerne. Det er muligt at tilpasse Puppeteer-funktionerne ved at ændre PUPPETEER_* miljøvariablerne. 

Installationskommando: npm installer dukketeater

I denne "Installer Puppeteer" -vejledning arbejder vi på Puppeteer-pakkeinstallationen, da der ikke er mange forskelle mellem disse to versioner.

Prøve dukketeaterprojekt

Puppeteer er kompatibel med både headful (non-headless) og headless chrome browsere. I tilfælde af hovedløs udføres browseraktiviteterne i baggrunden, dvs. browserens brugergrænseflade er ikke synlig for os. Det gør sagen (styring af browseren) enklere og lettere i et enkelt trin. Det betyder, at den samme ting (styring af browsere) kan gøres med flere komplekse trin.

De trin, der er involveret i opsætningseksemplet på marionetprojekt, vises nedenfor - 

Trin1 # Opret en mappestruktur til Sample Puppeteer Project: Opret en prøve rodkatalog med navnet "SampleProject" i en foruddefineret sti. Denne rodmappe fungerer som et eksempel på et dukketeaterprojekt. Derefter skal vi efter at have åbnet kommandoprompten navigere til denne rodkatalog.

Trin2 # Installer dukketeater: Ved hjælp af nedenstående kommando kan vi installere den fulde pakke med Puppeteer i rodmappen. Denne kommando downloader dybest set alle open-source NodeJS-biblioteker i prøve projekt folder. Installationsproceduren tager noget tid baseret på netværkshastigheden. Det vil downloade cirka 350 MB data. Efter installationen oprettes mappen node_modules, der indeholder forskellige dukkekomponenter og pakke-lock.json-fil, til rodmappen til Pupeteer-projektets eksempel.

Puppeteer tutorial - Installationslog
Puppeteer tutorial - Installationslog

Trin 3 # Opret eksempel på dukketeater-script: Nu skriver vi et eksempel på et dukketeatermanuskript, der påberåber sig LambdaGeeks websted, viser konsolbeskeder efter hvert trin og fanger skærmbilledet. I dette eksempel påberåbes en hovedløs krombrowser i baggrunden. Eksemplet på puppeteater script vil være - 

const dukkefører = require('dukkefører'); //include Puppeteer Library puppeteer.launch({headless:true}).then(async browser => { const pageNew = await browser.newPage(); // Start 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 - Naviger LambdaGeeks og tag skærmbillede'); await browser.close(); console.log('Trin3 - Browser lukket'); });

Denne kode skal gemmes i rodmappen i eksempeldukketøjsprojektet med filnavnet sample_script.js. I tilfælde af Puppeteer-core, skal vi medtage 'puppeteer-core' i stedet for 'puppeteer' i starten af ​​scriptet. For headful browser skal vi erstatte koden “{headless:true}” with “{headless:false}”.

Trin4 # Udfør prøveeksempler til dukketeater: Eksempelscriptet kan udføres fra kommandoprompten ved hjælp af nedenstående kommando -

npm node sample_script.js

Efter udførelsen bliver skærmbilledet fanget og gemt i rodmappen som "'screenshot_lambda.png".

Puppeteer tutorial - Eksempel på Puppeteer Project
Puppeteer tutorial - Eksempel på Puppeteer Project

Nu vil vi vise et andet eksempel på Puppeteer-script på amazon webapplikation. Dette script udfører nedenstående trin sammen med verifikationer i hvert trin -

  • Påkald Amazon-applikation.
  • Søg i en foruddefineret bog.
  • Tilføj den søgte bog i indkøbskurven.
  • Åbn vognen, og kontroller, om bogen er tilgængelig i vognen.
  • Optag skærm og luk browseren.

Vi gennemgår kun nedenstående script. Vi lærer detaljeret om forskellige trin, der skal udføres i næste artikel. Eksempelscriptet vises nedenfor -

/** * @navn Søg i Amazon */ const puppeteer = require('puppeteer'); const reportPathDir = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\'; const screenshotFile = 'skærm1.png'; prøv { (async () => { \t//Opret browser- og sideobjektforekomst, og naviger til URL-adressen 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/'); \t \t//Indtast amazon-søgekriterierne \tlet searchBoxAmazon = await pageWeb .waitForXPath("//*/input[@id='twotabsearchtextbox']",{ visible: true }); \tif (searchBoxAmazon === null) \t{ \t\tconsole.log('Amazon-skærmen er ikke vist'); \t} \telse{\t\t \t\tawait searchBoxAmazon.type("Testbog"); \t\tconsole.log('Søgekriterier er blevet indtastet'); \t} \t\ t \t \t//Klikkede på søgeknappen \tlet btnSearchAmazon = afvent sideWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visible: true }); \ tif (btnSearchAmazon === null) \t{ \t\tconsole.log('Søgeknappen vises ikke'); \t} \telse{ \t\tawait btnSearchAmazon.click(); \t\tconsole.log( 'Klikket på søgeknappen'); \t}\t \t \t//Klik på specifikt søgeresultat \tlet myBookAmazon = await pageWeb.waitForXPath("//*[contains(text(),'Selenium Test Tools Cookbook Second Edition')]",{ visible: true }) \tif (myBookAmazon === null) \t{ \t\tconsole.log('Bogen er ikke tilgængelig'); \t} \telse{ \t\tawait myBookAmazon.click(); \t\tconsole.log('Klik på specifik bog for at bestille'); \t} \t \t \t// Identificer, om den nye fane har åbnet \tconst pageTarget = pageWeb.target(); \tconst newTarget = afvent browserWeb.waitForTarget(target => target.opener() === pageTarget); \t//hent det nye sideobjekt: \tconst page2 = await newTarget.page();\t \tawait page2.setViewport({ width: 1280, height: 800 }); \t \t//Føj til kurv \tlet addToCartAmazon = afvent side2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true }); \tif (addToCartAmazon === null) \t{ \t\tconsole.log('Knappen Tilføj til kurv er ikke tilgængelig'); \t} \telse{ \t\tconsole.log('Klik på knappen Tilføj til kurv'); \t\tawait addToCartAmazon.click();\t\t \t} \t\t \t//Bekræft tilføjelse til indkøbskurv proces\t \tlet successMessageAmazon = afvent side2.waitForXPath("//*[contains(text( ),'Added to Cart')]",{ visible: true }); \tif (successMessageAmazon === null) \t{ \t\tconsole.log('Varen er ikke lagt i indkøbskurven'); \t} \telse{ \t\tconsole.log('Varen blev tilføjet til indkøbskurven med succes');\t\t \t} \t \t \t// Indfangningsnummer for indkøbskurven \tlet cartCountAmazon = afvent side2.waitForXPath ("//*/span[@id='nav-cart-count']",{ visible: true}); \tlet valueCount = afvent side2.evaluate(el => el.textContent, cartCountAmazon) \tconsole.log('Card count: ' + valueCount); \tcartCountAmazon.focus(); \tawait side2.skærmbillede({ sti: skærmbilledeFil }); \t \tawait pageWeb.waitForTimeout(3000); \tawait side2.close(); \tawait pageWeb.close(); afvent browserWeb.close(); })() } catch (e) { console.log(e) }

Bemærk: Vi forklarer detaljerede trin til at skrive scripts i de næste artikler.

konklusion:

I denne introduktionsartikel om “Installer Puppeteer” fra “Puppeteer Tutorial” har vi forklaret de detaljerede trin til installation af forskellige Puppeteer-pakker fra bunden. Puppeteateropsætningen inkluderer forskellige komponentinstallationer, f.eks. Installere NodeJs, installere VSCode, installere Puppeteer, oprette og udføre Puppeteer-prøveprojekt. I den næste Puppeteer-selvstudie forklarer vi detaljerede trin til brug af Puppeteer som et webskrabningsværktøj. Klik venligst  link. at læse fra referenceportalen.

Efterlad en kommentar