Installa Puppeteer - Un'eccellente guida didattica del Tutorial Puppeteer 4 e 5


Puppeteer è una libreria js di nodi open source che può essere utilizzata per strumenti di web scraping. Può anche essere utilizzato per eseguire l'automazione dei test nelle applicazioni web. Oggigiorno, l'utilizzo di Puppeteer sta aumentando rapidamente nello spazio di test automatizzato del software. Per comprendere il tutorial del burattinaio è necessaria una conoscenza di base della riga di comando, Javascript e struttura HTML DOM. L'intero tutorial è suddiviso negli articoli seguenti. 

Tutorial burattinaio

Tutorial Tosca # 1: Panoramica del burattinaio

Tosca Tutorial # 2: Variabili d'ambiente del burattinaio

Tosca Tutorial # 3: Panoramica su Puppeteer Web Scraping e Puppeteer Test Automation

Tosca Tutorial # 4: Installa Puppeteer

Tosca Tutorial # 5: Progetto Puppeteer di esempio

In questo Tutorial Puppeteer, impareremo i passaggi per installare Puppeteer con le sue dipendenze come installare NodeJs, installare editor per Puppeteer, ecc. Inoltre, dopo l'installazione, creeremo ed eseguiremo un progetto Puppeteer di esempio.

Installa Puppeteer

Per avviare lo sviluppo degli script Puppeteer, dobbiamo installare e configurare i componenti seguenti: 

1. Installa NodeJS

2. Installa l'editor

3. Installa Puppeteer

Installa NodeJS:

NodeJs è un ambiente server open source gratuito che può essere eseguito su piattaforme diverse. Utilizza javascript sul lato server. Il Puppeteer è un tipo di applicazione NodeJS. Quindi il primo passo della configurazione di Puppeteer è installare il framework NodeJS. Il framework NodeJS è disponibile per più piattaforme, inclusi Windows, Ubuntu, macOS, ecc. In questo contesto, lavoreremo sulla versione per il sistema operativo Windows a 64 bit. I passaggi per installare NodeJS sono:

Step1 # Scarica NodeJS: Clicchi qui per navigare nel collegamento per il download di NodeJS. Qui, scaricheremo il programma di installazione di Windows a 64 bit (.mts). 

Tutorial burattinaio - Installa NodeJs
Tutorial burattinaio - Installa NodeJs

Passo 2# Installa NodeJS: Dopo il completamento del download, è necessario installare NodeJs facendo doppio clic sul file di installazione (.msi). Durante l'installazione, dobbiamo procedere secondo le istruzioni.

Passo 3# Verifica NodeJS: Dopo il completamento dell'installazione, dobbiamo aprire il prompt dei comandi e inserire il comando come "nodo". Se vengono visualizzati i dettagli seguenti, l'installazione è corretta. Nel caso in cui venga visualizzato un errore, significa che l'installazione non è corretta.

Tutorial burattinaio - Verifica NodeJs
Tutorial burattinaio - Verifica NodeJs

Installa l'editor per Puppeteer:

Un editor non è altro che uno strumento che ci aiuta a scrivere, compilare ed eseguire i nostri codici Burattinaio. Sono disponibili molti strumenti che possono essere utilizzati come editor di codice java che include Visual Studio Code, Note Pad ++, Edit Plus, ecc. Anche noi possiamo scrivere codice burattinaio anche nell'applicazione predefinita "Note Pad". In questo "Installa burattinaio" lezione, useremo VSCode in quanto è gratuito e facilmente compatibile con l'applicazione NodeJS. VSCode non è altro che un componente di Visual Studio, disponibile gratuitamente. I passaggi per installare VSCode sono: 

Step1 # Downloadd VSCode: Clicchi qui per aprire il link per il download e scaricare la versione desiderata di VSCode Installer secondo il sistema operativo.

Step2 # Installa VSCode: Installa VSCode dal file di installazione nel sistema come qualsiasi altro software. Durante l'installazione, procedere solo con l'impostazione consigliata.

Step2 # Verifica VSCode: Dopo il completamento dell'installazione, apri l'applicazione per verificare se è installata correttamente.

Tutorial burattinaio - Editor per burattinaio
Tutorial burattinaio - Editor per burattinaio

Installa i pacchetti Puppeteer:

Dalla versione v1.7.0 di puppeteer, ogni versione contiene due pacchetti seguenti:

  • pacchetto burattinaio-core
  • pacchetto burattinaio

Entrambe le versioni di Puppeteer possono essere installate utilizzando i comandi della console. I comandi per installare Puppeteer sono: 

Installa il pacchetto Puppeteer-core: È una raccolta della libreria Node JS sviluppata in Java. Ha la capacità di lavorare sul protocollo devtools. Il browser Chromium non viene scaricato durante l'installazione del pacchetto Puppeteer-core. L'interfaccia programmatica di Puppeteer guida completamente la libreria principale del burattinaio. Un'altra importante limitazione è che le funzionalità principali del burattinaio non possono essere alterate cambiando nessuna delle variabili d'ambiente PUPPETEER_ *. 

Comando di installazione: npm installa puppeteer-core

Nota: Lo strumento Node JS deve essere installato prima di installare il pacchetto puppeteer-core.

Installa il pacchetto del prodotto Puppeteer: Puppeteer è il prodotto completo sviluppato da Google per controllare i browser Chrome. Essendo il pacchetto completo del prodotto Puppeteer, le ultime versioni del browser Chrome vengono scaricate durante l'installazione. Dopo di che l'installazione è guidata dal burattinaio-core. È possibile personalizzare le funzionalità di Puppeteer modificando le variabili d'ambiente PUPPETEER_ *. 

Comando di installazione: npm installa il burattinaio

In questo tutorial "Installa Puppeteer", lavoreremo sull'installazione del pacchetto Puppeteer poiché non ci sono molte differenze tra queste due versioni.

Progetto Puppeteer di esempio

Il Puppeteer è compatibile con browser chrome headful (non headless) e headless. In caso di headless, le attività del browser vengono eseguite in background, ovvero l'interfaccia utente del browser non è visibile per noi. Rende la cosa (controllare il browser) più semplice e facile in un unico passaggio. Significa che la stessa cosa (controllare i browser) può essere eseguita con più passaggi complessi.

I passaggi coinvolti nella configurazione del progetto Puppeteer di esempio sono mostrati di seguito: 

Step1 # Crea una struttura di cartelle per il progetto Puppeteer di esempio: Creare una directory principale di esempio con il nome "SampleProject" in un percorso predefinito. Questa directory principale funzionerà come un progetto Puppeteer di esempio. Successivamente, dopo aver aperto il prompt dei comandi, dobbiamo navigare in questa directory principale.

Step2 # Installa Puppeteer: Usando il comando seguente, possiamo installare il pacchetto completo di Puppeteer nella directory principale. Questo comando scarica fondamentalmente tutte le librerie NodeJS open source in progetto di esempio cartella. La procedura di installazione richiede del tempo in base alla velocità della rete. Scaricherà circa 350 MB di dati. Dopo l'installazione, la cartella node_modules, che contiene diversi componenti del pupazzo e il file package-lock.json, verrà creata nella cartella principale del progetto Pupeteer di esempio.

Tutorial burattinaio - Registro di installazione
Tutorial burattinaio - Registro di installazione

Step3 # Crea script burattinaio di esempio: Ora scriveremo un esempio di script burattinaio che invoca i LambdaGeeks sito web, visualizza i messaggi della console dopo ogni passaggio e cattura lo screenshot. In questo esempio, verrà richiamato in background un browser chrome senza testa. Lo script burattinaio di esempio sarà: 

const burattinaio = require('burattinaio'); //include la libreria Puppeteer puppeteer.launch({headless:true}).then(async browser => { const pageNew = await browser.newPage(); // Avvia il browser console.log('Step1 - Open Browser'); / /Visualizza messaggio await pageNew .setViewport({ width: 1280, height: 800 }) await pageNew .goto('https://lambdageeks.com/'); //Apri LambdaGeeks //Cattura screenshot await pageNew .screenshot({ percorso : 'screenshot_lambda.png' }); console.log('Step2 - Naviga in LambdaGeeks e fai screenshot'); await browser.close(); console.log('Step3 - Browser closed'); });

Questo codice deve essere memorizzato nella directory principale del progetto Puppeteer di esempio con il nome del file script_campione.js. Nel caso di Puppeteer-core, dobbiamo includere "burattinaio-core" invece di "burattinaio" all'inizio della sceneggiatura. Per il browser headful, dobbiamo sostituire il codice "{headless:true}” with “{headless:false}”.

Step4 # Esegui script burattinaio di esempio: Lo script di esempio può essere eseguito dal prompt dei comandi utilizzando il comando seguente:

nodo npm sample_script.js

Dopo l'esecuzione, lo screenshot verrà catturato e archiviato nella directory principale come "'screenshot_lambda.png".

Tutorial burattinaio - Esempio di progetto Puppeteer
Tutorial burattinaio - Esempio di progetto Puppeteer

Ora mostreremo un altro script Puppeteer di esempio sull'applicazione web di Amazon. Questo script eseguirà i passaggi seguenti insieme alle verifiche in ogni passaggio:

  • Richiama l'applicazione Amazon.
  • Cerca un libro predefinito.
  • Aggiungi il libro cercato nel carrello.
  • Apri il carrello e controlla se il libro è disponibile nel carrello.
  • Cattura la schermata e chiudi il browser.

Esamineremo solo lo script seguente. Impareremo in dettaglio i diversi passaggi da eseguire nel prossimo articolo. Lo script di esempio è mostrato di seguito:

/** * @name Cerca in Amazon */ const burattinaio = require('burattinaio'); const reportPathDir = 'C:\\LambdaGeeks\\puppteer_proj_sample\\output\\'; const screenshotFile = 'screen1.png'; try { (async () => { //Crea browser e istanza dell'oggetto pagina e vai all'URL const browserWeb = await puppeteer.launch({ headless: false }); const pageWeb = await browserWeb.newPage() await pageWeb.setViewport ({ larghezza: 1280, altezza: 800 }); await pageWeb.goto('https://www.amazon.in/'); //Inserisci i criteri di ricerca amazon let searchBoxAmazon = await pageWeb.waitForXPath("//* /input[@id='twotabsearchtextbox']",{ visible: true }); if (searchBoxAmazon === null) { console.log('Lo schermo di Amazon non viene visualizzato'); } else{ await searchBoxAmazon.type(" Testing Book"); console.log('I criteri di ricerca sono stati inseriti'); } //Fai clic sul pulsante di ricerca let btnSearchAmazon = await pageWeb.waitForXPath("//*/input[@id='nav-search-submit- button']",{ visible: true }); if (btnSearchAmazon === null) { console.log('Il pulsante di ricerca non viene visualizzato'); } else{ await btnSearchAmazon.click(); console.log('Clicked sul pulsante di ricerca'); } //Fai clic su un risultato di ricerca specifico let myBookAmazon = await pageWeb.waitForXPath ("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visible: true }) if (myBookAmazon === null) { console.log('Book is not available') ; } altro{ await myBookAmazon.click(); console.log('Fai clic sul libro specifico per ordinare'); } // Identifica se la nuova scheda è stata aperta const pageTarget = pageWeb.target(); const newTarget = attendi browserWeb.waitForTarget(target => target.opener() === pageTarget); //ottieni l'oggetto della nuova pagina: const page2 = await newTarget.page(); await page2.setViewport({ larghezza: 1280, altezza: 800 }); //Aggiungi al carrello let addToCartAmazon = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true }); if (addToCartAmazon === null) { console.log('Il pulsante Aggiungi al carrello non è disponibile'); } else{ console.log('Fai clic sul pulsante Aggiungi al carrello'); attendi addToCartAmazon.click(); } //Verifica processo di aggiunta al carrello let successMessageAmazon = await page2.waitForXPath("//*[contains(text(),'Aggiunto al carrello')]",{ visible: true }); if (successMessageAmazon === null) { console.log('L'articolo non è stato aggiunto al carrello'); } else{ console.log('L'articolo è stato aggiunto al carrello con successo'); } // Cattura no del carrello let cartCountAmazon = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visibile: true}); let valueCount = await page2.evaluate(el => el.textContent, cartCountAmazon) console.log('Cart count: ' + valueCount); cartCountAmazon.focus(); await page2.screenshot({ percorso: file screenshot }); attendi paginaWeb.waitForTimeout(3000); attendi pagina2.close(); attendi pageWeb.close(); attendi browserWeb.close(); })() } cattura (e) { console.log(e) }

Nota: Spiegheremo i passaggi dettagliati per scrivere gli script nei prossimi articoli.

Conclusione:

In questo articolo introduttivo su "Installa Puppeteer" dal "Tutorial Puppeteer", abbiamo spiegato i passaggi dettagliati per installare diversi pacchetti Puppeteer da zero. La configurazione del burattinaio include diverse installazioni di componenti come, installare NodeJs, installare VSCode, installare Puppeteer, creare ed eseguire progetto di esempio Puppeteer. Nel prossimo tutorial Puppeteer, spiegheremo i passaggi dettagliati per utilizzare Puppeteer come strumento di web scraping. Fare clic su  qui leggere dal portale di riferimento.

K Mondal

Ciao, sono K. Mondal, sono associato a un'organizzazione leader. Ho più di 12 anni di esperienza lavorativa in diversi domini, ad esempio sviluppo di applicazioni, test di automazione, consulente IT. Sono molto interessato all'apprendimento di diverse tecnologie. Sono qui per soddisfare la mia aspirazione e attualmente contribuisco come autore e sviluppatore di siti Web sia in LambdaGeeks. Collegati a LinkedIn- https://www.linkedin.com/in/kumaresh-mondal/

Post Recenti