Burattinaio vs selenio: quale è meglio per l'automazione?

I test automatizzati sono diventati una parte essenziale del moderno sviluppo web. Man mano che le applicazioni web diventano più complesse, testare manualmente ogni funzionalità non è più fattibile. Gli strumenti di test automatizzati consentono agli sviluppatori di scrivere test che simulano le interazioni dell'utente e verificano che l'applicazione funzioni come previsto.

Due degli strumenti più popolari per i test automatizzati del browser sono Puppeteer e Selenium. Entrambi possono avviare un browser, navigare nelle pagine Web, interagire con gli elementi di una pagina e fare asserzioni sul contenuto della pagina. Tuttavia, esistono alcune differenze chiave che rendono ogni strumento più adatto a determinati scenari di test.

In questa guida completa confronteremo Puppeteer e Selenium per aiutarti a determinare qual è la scelta giusta per le tue esigenze.

Che cos'è il burattinaio?

burattinaio è una libreria Node sviluppata dal team di Chrome. Fornisce un'API di alto livello per controllare Chrome headless tramite il protocollo DevTools.

Puppeteer funziona headless per impostazione predefinita, ma può essere configurato per eseguire Chrome o Chromium completi (non headless).

Alcune caratteristiche chiave di Puppeteer:

• Genera screenshot e PDF di pagine
• Esegue la scansione di un sito per estrarre il contenuto
• Automatizza l'invio di moduli, il test dell'interfaccia utente, l'input da tastiera
• Abilita il test reattivo impostando l'emulazione del dispositivo
• Consente l'esecuzione del JavaScript del browser
• API per eventi del browser come la navigazione e i log della console
• Supporta l'installazione dell'estensione

Puppeteer supporta solo browser basati su Chromium come Chrome e Microsoft Edge. Non funziona con Firefox o Safari.

Che cosa è il selenio?

Selenio è una suite di strumenti open source per automatizzare i browser web. È in circolazione da più tempo di Puppeteer e ha sostenitori di diversi fornitori di browser.

Selenium supporta più linguaggi tra cui Java, C#, Python, JavaScript e Ruby. Può automatizzare Chrome, Firefox, Edge e Safari su piattaforme desktop. Selenium supporta anche i browser mobili per i test Android e iOS.

Caratteristiche del selenio:

• compatibilità cross-browser
• Funzionalità di test mobile
• IDE per la registrazione e la riproduzione
• Griglia per la distribuzione dei test su più macchine
• Integrazioni con vari test runner come JUnit, TestNG, Mocha
• Ampia comunità di utenti in tutti i settori

A differenza di Puppeteer, Selenium non consente di eseguire JavaScript del browser o di lavorare direttamente con DevTools.

Confronto di sintassi

Puppeteer utilizza un'API concisa che si legge come uno pseudocodice. Per esempio:

// Navigate to a URL
await page.goto(‘https://www.example.com‘);

// Get an element 
const button = await page.$(‘#submit-button‘); 

// Click the button  
await button.click();

Selenium utilizza un'API più dettagliata:

// Launch browser
WebDriver driver = new ChromeDriver();

// Navigate to URL
driver.get("https://www.example.com");

// Find element
WebElement button = driver.findElement(By.id("submit-button"));

// Click element  
button.click(); 

L'API di Puppeteer sembra più user-friendly e più facile da leggere. L'uso della sintassi asincrona/attesa riduce l'annidamento delle richiamate. Nel complesso, Puppeteer richiede meno codice standard rispetto a Selenium.

Avvio dei browser

Per avviare un'istanza del browser, Puppeteer utilizza:

const browser = await puppeteer.launch();

Con Selenium, devi inizializzare una classe di driver specifica:

// Launch Chrome  
WebDriver driver = new ChromeDriver();

// Launch Firefox
WebDriver driver = new FirefoxDriver(); 

Puppeteer avvia solo Chromium, mentre Selenium supporta più browser. Per i test su più browser, Selenium è una scelta migliore.

Elementi di localizzazione

Burattinaio trova gli elementi utilizzando:

// Get element by CSS selector
const el = await page.$(‘.className‘);

// Get element by XPath  
const el = await page.$x(‘//xpath‘); 

Selenium individua gli elementi tramite i localizzatori WebDriver:

// Find by CSS
WebElement el = driver.findElement(By.cssSelector(".className"));

// Find by XPath
WebElement el = driver.findElement(By.xpath("//xpath"));

Entrambi gli strumenti offrono un'ampia gamma di strategie di localizzazione come ID, classe, testo, gerarchia DOM. Nel complesso, la selezione degli elementi è semplice in entrambi.

Interazione con gli elementi

Per interagire con gli elementi su una pagina, Puppeteer utilizza:

// Type into an input  
await page.type(‘#input‘, ‘Hello world‘);

// Click a button
await button.click(); 

// Select an option
await page.select(‘#dropdown‘, ‘option2‘);

Il codice equivalente del selenio è:

// Type text  
driver.findElement(By.id("input")).sendKeys("Hello world");

// Click button
button.click();

// Select option
Select dropdown = new Select(driver.findElement(By.id("dropdown")));
dropdown.selectByVisibleText("option2");

L'API di Puppeteer sembra più compatta ed espressiva. Il selenio richiede uno standard aggiuntivo per alcune interazioni come la selezione dei menu a discesa.

Navigazione della pagina

Per navigare tra le pagine, Puppeteer utilizza:

// Navigate to URL 
await page.goto(‘https://example.com‘);

// Click a link
await page.click(‘a.page2‘); 

// Go back
await page.goBack();

E nel selenio:

// Open URL
driver.get("https://example.com");

// Click link
driver.findElement(By.cssSelector("a.page2")).click();

// Go back  
driver.navigate().back();

I metodi di navigazione sono molto simili tra i due strumenti. Puppeteer rimuove parte della verbosità attorno ai comandi dei driver nidificati di Selenium.

Esecuzione di JavaScript

Uno dei principali vantaggi di Puppeteer è la capacità di eseguire direttamente il JavaScript del browser:

// Set a cookie 
await page.evaluate(() => {
  document.cookie = "foo=bar"; 
});

// Get an element‘s text 
const text = await page.evaluate(el => el.textContent, element);

Selenium non fornisce metodi per eseguire direttamente JavaScript. È necessario utilizzare tecniche alternative come l'inserimento di script nelle pagine.

In attesa degli elementi

Le app Web possono richiedere tempo per caricare i contenuti in modo dinamico con JavaScript. I test automatizzati devono attendere che gli elementi siano pronti prima di interagire con essi.

Burattinaio ti fa scrivere manualmente le attese:

// Wait for selector to be visible
await page.waitForSelector(‘.element‘); 

// Wait for navigation to complete
await page.waitForNavigation();

Il selenio ha attese esplicite e implicite integrate:

// Implicit wait 
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

// Explicit wait  
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".element")));

Avere attese integrate configurabili semplifica la gestione dei problemi di temporizzazione in Selenium. Burattinaio richiede attese di scripting manuale.

Generazione di schermate

Entrambi gli strumenti possono acquisire screenshot delle pagine durante i test.

Esempio di burattinaio:

// Take a screenshot 
await page.screenshot({path: ‘page.png‘});

Esempio di selenio:

// Capture screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

Le funzionalità degli screenshot sono molto simili. L'API di Puppeteer è un po' più semplice.

Creazione di PDF

Oltre agli screenshot, Puppeteer può generare PDF di pagine:

// Generate PDF
await page.pdf({path: ‘page.pdf‘});

Questa funzionalità non è integrata in Selenium. Avresti bisogno di un'utilità personalizzata per stampare pagine in PDF con Selenium.

Gestione dei popup

Per gestire avvisi, richieste e popup del browser, Puppeteer fornisce i file della pagina dialog evento:

page.on(‘dialog‘, dialog => {
  console.log(dialog.message());
  dialog.accept(); 
});

Selenium utilizza l'interfaccia Alert per interagire con i popup:

// Switch to alert
Alert alert = driver.switchTo().alert();  

// Get text
String text = alert.getText();

// Accept alert
alert.accept();

Entrambi gli strumenti possono gestire i popup JS durante l'automazione. L'API di Selenium sembra più raffinata per lavorare con i popup.

Test in parallelo

L'esecuzione dei test in parallelo può velocizzare significativamente l'esecuzione dei test.

Puppeteer non supporta direttamente i test paralleli. È necessario orchestrare l'esecuzione parallela tramite un test runner separato.

Selenium Grid consente di distribuire i test da eseguire in parallelo su più macchine. Ciò semplifica la scalabilità dei test sul selenio.

Registri del browser

L'accesso ai registri del browser può essere utile per eseguire il debug dei test e ispezionare l'attività di rete.

Puppeteer consente di acquisire la console del browser e i registri di rete:

// Listen for console logs
page.on(‘console‘, msg => {
  console.log(‘Page Log:‘, msg.text()); 
}); 

// Get network request logs
const requests = browser.on(‘request‘, request => {
  request.url(); // Log URLs
});

Selenium non fornisce metodi per accedere direttamente ai log del browser. Dovresti trovare soluzioni alternative per ottenere i registri della console o della rete.

Simulazione agente utente

È importante testare il modo in cui un sito Web risponde a diversi dispositivi e agenti utente.

Puppeteer semplifica lo spoofing delle stringhe dell'agente utente:

await page.setUserAgent(‘Custom User Agent‘);

Il selenio non consente direttamente l'impostazione degli agenti utente. Ciò richiederebbe la configurazione dei profili del browser.

Controlli di performance

Puppeteer integra strumenti per analizzare le prestazioni della pagina:

// Audit performance 
const metrics = await page.audit({
  disableJavaScript: true // Test without JavaScript 
});

// Log metrics
metrics.totalByteWeight; // Total page weight

Il controllo di gestione richiederebbe l’introduzione di strumenti aggiuntivi con Selenium. Il burattinaio lo costruisce subito.

Confronto dei prezzi

Una delle principali differenze tra Puppeteer e Selenium sono le restrizioni sull'uso commerciale.

Puppeteer è open source e gratuito da usare. Puoi usarlo commercialmente senza alcuna restrizione.

Anche il selenio è open source. Tuttavia, i binari ufficiali di Selenium WebDriver sono concessi in licenza solo per uso non commerciale. Per l'utilizzo commerciale, è necessario ottenere una licenza dal fornitore Selenium BrowserStack.

Ciò può rendere Puppeteer preferibile per i team che desiderano utilizzare una soluzione di automazione a livello commerciale senza costi di licenza.

Test senza testa

Il test headless si riferisce all'esecuzione di un browser senza alcuna interfaccia utente visibile. Fornisce un ambiente leggero per i test.

Puppeteer avvia Chrome in modalità headless per impostazione predefinita, rendendolo ideale per i test headless.

Il selenio può anche essere configurato per funzionare senza testa utilizzando opzioni come:

chromeOptions.addArguments("--headless"); 

Entrambi gli strumenti consentono quindi test senza testa, con Puppeteer che lo rende l'esperienza predefinita predefinita.

Integrazione continua

L'integrazione CI/CD è importante per automatizzare l'esecuzione dei test sulle modifiche al codice.

Puppeteer da solo non fornisce alcuna funzionalità CI/CD incorporata. È necessario collegarlo a strumenti CI come Jenkins, CircleCI, ecc.

Selenium offre l'integrazione nativa con pipeline CI/CD tramite griglia di selenio. Ciò consente di distribuire facilmente i test sull'infrastruttura CI.

Test mobili

Sebbene entrambi gli strumenti si concentrino sui test web, Selenium fornisce inoltre supporto per i test mobili.

Il progetto Selenium Appium consente di automatizzare le app mobili native su piattaforme Android e iOS. Puppeteer non supporta il test delle app mobili.

Curva di apprendimento

Per gli sviluppatori che hanno familiarità con JavaScript e Node.js, Puppeteer è molto intuitivo da iniziare a utilizzare. Il design dell'API rispecchia da vicino i concetti dell'API DOM.

Selenium ha una curva di apprendimento più ripida poiché devi imparare l'API WebDriver specifica per Selenium. Ma l'esperienza Java aiuta a crescere più velocemente.

Nel complesso, Puppeteer è più semplice e facile da imparare per chi ha un background di sviluppo web.

Funzionalità di debug

La risoluzione dei problemi relativi ai test falliti è una parte importante dell'automazione dei test.

Puppeteer consente di impostare punti di interruzione ed eseguire il debug direttamente in Chrome DevTools per un debug semplice:

await page.pause(); // Pause execution

Il selenio non ha il debug integrato. Devi fare affidamento su istruzioni di log o strumenti di debug esterni.

Supporto Browser

La limitazione principale di Puppeteer è che supporta solo i browser basati su Chromium. Quindi non puoi usarlo per testare su Firefox o Safari.

Selenium supporta Chrome, Firefox, Edge e Safari consentendo veri test cross-browser. Se la copertura dei test su tutti i browser è una priorità, allora Selenium è probabilmente la scelta migliore.

Comunità open source

Il selenio esiste da oltre un decennio e ha alle spalle una vasta comunità. Ci sono conferenze, gruppi di utenti e un forum attivo di domande e risposte dedicato al selenio.

Essendo un progetto più recente, Puppeteer ha una comunità molto più piccola. Ma la sua ergonomia da sviluppatore e lo slancio guidato da Google potrebbero consentirgli di recuperare terreno nel tempo.

Dovresti usare Puppeteer o Selenio?

Ora che abbiamo confrontato i due strumenti, come decidi se utilizzare Puppeteer o Selenium?

Ecco alcuni fattori chiave da considerare:

• Supporto browser – Se hai bisogno di test multi-browser, Selenium è l’opzione migliore. Per i test solo su Chrome, Puppeteer è una buona scelta.

• Test mobili – Selenium supporta il test del Web mobile e delle app native. Puppeteer è solo desktop.

• Debug – L'integrazione DevTools integrata di Puppeteer semplifica il debug.

• Cross-piattaforma – Per l'automazione dei test Java e C#, Selenium offre un supporto migliore. Puppeteer è focalizzato su JS/Node.

• Tipo di applicazione – Puppeteer è particolarmente adatto per testare SPA e app Web più piccole. Selenium si adatta meglio alle app aziendali più grandi con ampie integrazioni backend.

• Utilizzo commerciale – I team che desiderano utilizzare l’automazione a livello commerciale senza limitazioni di licenza possono trarre vantaggio da Puppeteer.

• Comodità di programmazione – Per i tester provenienti da un background DevOps e JavaScript, Puppeteer potrebbe avere una curva di apprendimento inferiore. Gli utenti Java possono aumentare più rapidamente su Selenium.

• Investimento ereditario – Se disponi già di un numero considerevole di test sul Selenio, probabilmente ha senso continuare a migliorarli anziché ricominciare da capo con Puppeteer.

Per molte esigenze di automazione dei test, entrambi gli strumenti possono portare a termine il lavoro. Ciascuno ha punti di forza unici che lo rendono adatto a casi d'uso particolari. Ci auguriamo che questo confronto dettagliato fornisca chiarezza sul fatto che Puppeteer o Selenium sia la scelta giusta per le tue esigenze.