Sfrutta la potenza di WebDriver BiDi: l'automazione di Chrome e Firefox con Puppeteer

Puppeteer ora parla con Firefox. 🎉 Ma aspetta, non è già così? 🤔 Analizziamo WebDriver BiDi, il nuovo protocollo di Puppeteer, e scopriamo cosa significa questo entusiasmante sviluppo per il flusso di lavoro di automazione di Firefox.

WebDriver BiDi è un nuovo protocollo di automazione cross-browser standardizzato che combina il meglio di WebDriver Classic e del protocollo Chrome DevTools (CDP). Promettono una comunicazione bidirezionale, consentendo un'automazione più efficiente e più capace e un controllo granulare. Puoi monitorare l'avanzamento nella roadmap ufficiale.

Dal nostro precedente aggiornamento dello stato, abbiamo continuato a lavorare a stretto contatto con il W3C Browser Testing and Tools Working Group. Puppeteer ora implementa funzionalità come il logging, gli eventi di rete e l'invio di moduli, grazie ai progressi di WebDriver BiDi.

Fammi vedere il codice

Il seguente script Puppeteer mostra WebDriver BiDi in azione e funziona perfettamente su Chrome e Firefox:

  1. Avvia il browser scelto con l'impostazione del protocollo.
  2. Monitora i messaggi della console per rilevare eventuali errori.
  3. Vai a una pagina web, imposta le dimensioni dell'area visibile e fai clic su un pulsante.
  4. Verificare i contenuti del testo e dichiarare l'uguaglianza.
import * as assert from 'node:assert'; 
import puppeteer from 'puppeteer';

// Arrange: Launch browser with WebDriver BiDi
const browser = await puppeteer.launch({
  protocol: 'webDriverBiDi',
     product: 'firefox', // or 'chrome'
});
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

// Arrange: Monitor console messages
page.on('console', message => {
  if (message.type() != 'error') return;
  console.log('RECEIVED: %s', message.text());
});

// Action
await page.setViewport({width: 600, height: 1041});
await page.goto('https://coffee-cart.app/?breakable=1');

const coffee = await page.waitForSelector('[data-test="Espresso"]');
await coffee.click();

// Assert 
const checkout = await page.$('[data-test="checkout"]');
const total = await checkout.evaluate(el => el.textContent);
assert.equal(total, 'Total: $10.00');

browser.close();

Aggiornamento di WebDriver BiDi in Puppeteer

Per valutare le funzionalità di WebDriver BiDi in Puppeteer, abbiamo utilizzato l'intera suite di test Puppeteer. Sebbene l'implementazione di Puppeteer e WebDriver BiDi sia ancora in corso e non disponga ancora di tutte le funzionalità di Puppeteer con Chrome e CDP, vogliamo darti un quadro chiaro della situazione.

Firefox:

  • WebDriver BiDi ha raggiunto un livello di qualità adatto per attività pratiche di automazione. Mozilla ha portato i test di Puppeteer per pdf.js da Firefox e CDP a Firefox e WebDriver BiDi.
  • Oltre il 55% dei test supera con esito positivo WebDriver BiDi, a dimostrazione della sua crescente funzionalità.
  • In particolare, oltre 82 nuovi test utilizzano WebDriver BiDi in modo efficiente, aprendo la strada a ulteriori miglioramenti.

Chrome:

  • Al momento Chrome raggiunge un tasso di successo del 68% con WebDriver BiDi, a dimostrazione di una funzionalità affidabile. Sebbene ci sia margine per un'ulteriore ottimizzazione rispetto all'approccio basato su CDP, si tratta di sviluppi futuri ed entusiasmanti promettenti.

Alcune funzionalità, come l'accesso ai cookie, l'intercettazione delle richieste di rete, funzionalità di emulazione specifiche e autorizzazioni, sono ancora in fase di standardizzazione attiva. Verranno integrate in Puppeteer quando saranno pronte. Nel frattempo, consulta l'elenco completo delle funzionalità di Puppeteer supportate da WebDriver BiDi.

Puppeteer non supportava già Firefox?

Sebbene in precedenza Puppeteer offrisse il supporto sperimentale per Firefox utilizzando un'implementazione limitata e non cross-browser di CDP, presentava delle limitazioni e non era una soluzione sostenibile.

La nuova implementazione sperimentale BiDi di Firefox e WebDriver risolve questi problemi.

Sappiamo che potresti avere altre domande, ad esempio:

  • Il supporto di CDP di Firefox verrà ritirato?
  • Tutte le funzionalità di Puppeteer sono supportate?

Per risposte dettagliate e ulteriori informazioni, consulta l'annuncio dedicato di Firefox.

Periodo entusiasmante

I test cross-browser sono stati una delle principali esigenze degli sviluppatori, quindi siamo lieti di guidare l'integrazione di WebDriver BiDi in Puppeteer, che segna un punto di svolta verso un'esperienza di automazione cross-browser più semplice ed efficiente. Ti invitiamo a esplorare WebDriver BiDi con Puppeteer.

Guardando al futuro, WebDriver BiDi diventerà il protocollo predefinito per Puppeteer, aprendo la strada a un'esperienza di automazione coerente e potenziata.

Per eventuali problemi riscontrati durante l'esecuzione dei test Puppeteer con WebDriver BiDi, apri i problemi nel nostro issue tracker Puppeteer.