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

Jecelyn Yeen
Jecelyn Yeen

Puppeteer ora parla con Firefox! 🎉 Un momento, non è 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 Chrome DevTools Protocol (CDP). Promette una comunicazione bidirezionale, consentendo un'automazione più efficiente e più capace, nonché un controllo granulare. Puoi monitorarne i progressi sulla tabella di marcia ufficiale.

Dopo il 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 logging, eventi di rete e invii di moduli, grazie ai progressi di WebDriver BiDi.

Mostrami il codice

Il seguente script Puppeteer mostra WebDriver BiDi in azione e funziona senza problemi 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 il contenuto testuale 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();

Avanzamento di WebDriver BiDi in Puppeteer

Per valutare le funzionalità di WebDriver BiDi in Puppeteer, abbiamo utilizzato la suite di test Puppeteer completa. Anche se l'implementazione di Puppeteer e WebDriver BiDi è ancora in fase di sviluppo e non ha ancora tutti i dettagli utili di Puppeteer con Chrome e CDP, vogliamo darti un'idea chiara della situazione.

Firefox:

  • WebDriver BiDi ha raggiunto un livello di qualità adeguato per attività di automazione pratiche. Mozilla ha eseguito il trasferimento dei test Puppeteer per pdf.js da Firefox e CDP a Firefox e WebDriver BiDi.
  • Oltre il 55% dei test supera il test con WebDriver BiDi, dimostrando la sua funzionalità in continua crescita.
  • In particolare, WebDriver BiDi è stato utilizzato in modo efficiente per oltre 82 nuovi test, aprendo la strada a ulteriori miglioramenti.

Chrome:

  • Chrome sta attualmente ottenendo una percentuale di passaggio del 68% con WebDriver BiDi, a dimostrazione delle funzionalità affidabili. Sebbene ci sia spazio per un'ulteriore ottimizzazione rispetto all'approccio basato sul CDP, questi promettenti sviluppi futuri sono molto interessanti.

Determinate funzioni, come l'accesso ai cookie, l'intercettazione delle richieste di rete, le funzioni di emulazione specifiche e le autorizzazioni sono ancora in fase di standardizzazione attiva. Al termine, verranno integrate in Puppeteer. Nel frattempo, dai un'occhiata all'elenco completo delle funzionalità di Puppeteer supportate da WebDriver BiDi.

Puppeteer non supportava già Firefox?

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

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

Sappiamo che potresti avere altre domande, ad esempio:

  • Il supporto CDP di Firefox non sarà più disponibile?
  • Tutte le funzionalità di Puppeteer sono supportate?

Per risposte dettagliate e ulteriori informazioni, leggi l'annuncio dedicato da Firefox.

Vivi momenti entusiasmanti

I test su più browser sono stati una delle principali esigenze degli sviluppatori, quindi siamo entusiasti di condurre l'integrazione di WebDriver BiDi in Puppeteer, il 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.

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

Per qualsiasi problema riscontrato durante l'esecuzione dei test Puppeteer con WebDriver BiDi, apri i problemi nel nostro Issue Tracker di Puppeteer.