Die Möglichkeiten von WebDriver BiDi nutzen: Automatisierung von Chrome und Firefox mit Puppeteer

Puppeteer spricht jetzt mit Firefox 🎉 Aber Moment, das ist doch schon passiert? 🤔 Sehen wir uns WebDriver BiDi an, das neue Protokoll in Puppeteer, und finden heraus, was diese spannende Entwicklung für den Firefox-Automatisierungsablauf bedeutet.

WebDriver BiDi ist ein neues standardisiertes browserübergreifendes Automatisierungsprotokoll, das das Beste aus WebDriver Classic und Chrome DevTools Protocol (CDP) vereint. Es verspricht eine bidirektionale Kommunikation, die eine effizientere und leistungsfähigere Automatisierung sowie eine detailliertere Kontrolle ermöglicht. Sie können den Fortschritt in der offiziellen Roadmap verfolgen.

Seit unserem letzten Statusupdate arbeiten wir weiterhin eng mit der W3C-Arbeitsgruppe für Browsertests und -tools zusammen. Dank der Weiterentwicklungen von WebDriver BiDi werden in Puppeteer jetzt Funktionen wie Logging, Netzwerkereignisse und Formularübermittlungen implementiert.

Code anzeigen

Das folgende Puppeteer-Script zeigt WebDriver BiDi in Aktion und funktioniert nahtlos in Chrome und Firefox:

  1. Starten Sie den ausgewählten Browser mit der Protokolleinstellung.
  2. Konsolenmeldungen auf Fehler prüfen
  3. Rufen Sie eine Webseite auf, legen Sie die Abmessungen des Darstellungsbereichs fest und klicken Sie auf eine Schaltfläche.
  4. Prüfen Sie den Textinhalt und bestätigen Sie die Gleichheit.
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();

Fortschritt von WebDriver BiDi in Puppeteer

Um die Funktionen von WebDriver BiDi in Puppeteer zu bewerten, haben wir die umfassende Puppeteer-Testsuite verwendet. Die BiDi-Implementierung von Puppeteer und WebDriver befindet sich noch in der Entwicklungsphase und bietet noch nicht alle Funktionen von Puppeteer mit Chrome und CDP. Wir möchten Ihnen aber einen Überblick über den aktuellen Stand geben.

Firefox:

  • WebDriver BiDi hat ein Qualitätsniveau erreicht, das für praktische Automatisierungsaufgaben geeignet ist. Mozilla hat die Puppeteer-Tests für pdf.js erfolgreich von Firefox und CDP zu Firefox und WebDriver BiDi portiert.
  • Über 55% der Tests wurden mit WebDriver BiDi erfolgreich bestanden, was die wachsende Funktionalität unterstreicht.
  • Insbesondere werden in über 82 neuen Tests WebDriver BiDi effizient verwendet, was den Weg für weitere Verbesserungen ebnet.

Chrome:

  • Chrome erreicht derzeit eine Bestehensquote von 68% mit WebDriver BiDi und bietet damit eine zuverlässige Funktionalität. Im Vergleich zum CDP-basierten Ansatz lässt sich zwar noch Raum für weitere Optimierungen geben, dies sind jedoch vielversprechende zukünftige Entwicklungen.

Bestimmte Funktionen wie der Cookie-Zugriff, das Abfangen von Netzwerkanfragen, bestimmte Emulationsfunktionen und Berechtigungen werden derzeit noch standardisiert. Sie werden in Puppeteer integriert, sobald sie fertig sind. In der Zwischenzeit können Sie sich die vollständige Liste der Puppeteer-Funktionen ansehen, die von WebDriver BiDi unterstützt werden.

Hat Puppeteer Firefox nicht bereits unterstützt,

Puppeteer bot bisher experimentelle Unterstützung für Firefox mit einer eingeschränkten und nicht browserübergreifenden Implementierung von CDP an, hatte aber Einschränkungen und war keine nachhaltige Lösung.

Die neue experimentelle BiDi-Implementierung von Firefox und WebDriver behebt diese Probleme.

Möglicherweise haben Sie noch weitere Fragen, zum Beispiel:

  • Wird der CDP-Support von Firefox eingestellt?
  • Werden alle Puppeteer-Funktionen unterstützt?

Ausführliche Antworten und weitere Informationen findest du in der speziellen Ankündigung von Firefox.

Spannende Zeiten vor uns

Browserübergreifende Tests sind eine der wichtigsten Anforderungen von Entwicklern. Wir freuen uns daher, die Integration von WebDriver BiDi in Puppeteer voranzutreiben. Dies ist ein Wendepunkt hin zu einer reibungsloseren und effizienteren browserübergreifenden Automatisierung. Wir empfehlen Ihnen, WebDriver BiDi mit Puppeteer auszuprobieren.

WebDriver BiDi wird in Zukunft das Standardprotokoll für Puppeteer sein und so den Weg für eine konsistente und leistungsstarke Automatisierung ebnen.

Wenn beim Ausführen von Puppeteer-Tests mit WebDriver BiDi Probleme auftreten, können Sie diese in unserem Puppeteer-Problem-Tracker melden.