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 di Puppeteer, impareremo i passaggi per installare Puppeteer con le sue dipendenze come installare NodeJs, installare l'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).
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.
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.
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, durante l'installazione vengono scaricate le ultime versioni del browser Chromium. Successivamente l'installazione è guidata da marionettista-core. È possibile personalizzare le funzionalità di Puppeteer modificando le variabili di 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.
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 pupeteer.launch({headless:true}).then(browser asincrono => { const pageNew = attendono browser.newPage(); // Avvia il browser console.log('Step1 - Open Browser'); / /Visualizza messaggio attendono pageNew .setViewport({ larghezza: 1280, altezza: 800 }) attendono pageNew .goto('https://techiescience.com/'); //Apri LambdaGeeks //Cattura screenshot attendono pageNew .screenshot({ percorso : 'screenshot_lambda.png' }); console.log('Passaggio 2 - Naviga in LambdaGeeks e acquisisci screenshot'); attendi browser.close(); console.log('Passaggio 3 - Browser chiuso'); });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".
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:
/**
* @nome Cerca su Amazon
*/
const burattinaio = require('burattinaio');
const reportPathDir = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\';
const screenshotFile = 'screen1.png';
Tentativo {
(asincrono () => {
\t//Crea un'istanza dell'oggetto browser e pagina e vai all'URL
const browserWeb = attendono burattinaio.launch({ headless: false });
const pageWeb = attendono browserWeb.newPage()
attendono pageWeb.setViewport({ larghezza: 1280, altezza: 800 });
attendono pageWeb.goto('https://www.amazon.in/');
\T
\t//Inserisci i criteri di ricerca di Amazon
\tlet searchBoxAmazon = attendono pageWeb.waitForXPath("//*/input[@id='twotabsearchtextbox']",{ visibile: true });
\tif (searchBoxAmazon === null)
\T{
\t\tconsole.log('La schermata di Amazon non viene visualizzata');
\T}
\telse{\t\t
\t\tawait searchBoxAmazon.type("Libro di prova");
\t\tconsole.log('I criteri di ricerca sono stati inseriti');
\t} \t\t
\T
\t//Ho fatto clic sul pulsante di ricerca
\tlet btnSearchAmazon = attendono pageWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visibile: true });
\tif (btnSearchAmazon === null)
\T{
\t\tconsole.log('Il pulsante Cerca non viene visualizzato');
\T}
\telse{
\t\tawait btnSearchAmazon.click();
\t\tconsole.log('Cliccato sul pulsante di ricerca');
\t}\t
\T
\t//Fai clic su un risultato di ricerca specifico
\tlet myBookAmazon = attendono pageWeb.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visibile: true })
\tif (myBookAmazon === null)
\T{
\t\tconsole.log('Il libro non è disponibile');
\T}
\telse{
\t\tawait myBookAmazon.click();
\t\tconsole.log('Fare clic su un libro specifico per ordinarlo');
\t} \t
\T
\t// Identifica se la nuova scheda è stata aperta
\tconst pageTarget = paginaWeb.target();
\tconst newTarget = attendono browserWeb.waitForTarget(target => target.opener() === pageTarget);
\t//ottieni il nuovo oggetto pagina:
\tconst page2 = attendono newTarget.page();\t
\tawait page2.setViewport({ larghezza: 1280, altezza: 800 });
\T
\t//Aggiungi al carrello
\tlet addToCartAmazon = attendono page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visibile: true });
\tif (addToCartAmazon === null)
\T{
\t\tconsole.log('Il pulsante Aggiungi al carrello non è disponibile');
\T}
\telse{
\t\tconsole.log('Fai clic sul pulsante Aggiungi al carrello');
\t\ta aspetta addToCartAmazon.click();\t\t
\t} \t\t
\t//Verifica il processo di aggiunta al carrello\t
\tlet successMessageAmazon = attendono page2.waitForXPath("//*[contains(text(),'Aggiunto al carrello')]",{ visibile: true });
\tif (successMessageAmazon === null)
\T{
\t\tconsole.log('L'articolo non è stato aggiunto al carrello');
\T}
\telse{
\t\tconsole.log('L'articolo è stato aggiunto al carrello con successo');\t\t
\t} \t
\T
\t// Cattura il numero del carrello
\tlet cartCountAmazon = attendono page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visibile: true});
\tlet valueCount = attendono page2.evaluate(el => el.textContent, cartCountAmazon)
\tconsole.log('Conteggio carrello: ' + valueCount);
\tcartCountAmazon.focus();
\tawait page2.screenshot({ percorso: screenshotFile });
\T
\tawait pageWeb.waitForTimeout(3000);
\aspetta pagina2.close();
\tawait pageWeb.close();
attendono browserWeb.close();
})()
} prendere (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.
Ciao, sono K. Mondal, sono associato ad un'organizzazione leader. Ho più di 12 anni di esperienza lavorativa in diversi settori, ad esempio sviluppo di applicazioni, test di automazione, consulente IT. Sono molto interessato ad apprendere diverse tecnologie. Sono qui per soddisfare la mia aspirazione e attualmente contribuisco come autore e sviluppatore di siti Web entrambi in LambdaGeeks.
Connettiamoci tramite LinkedIn-