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

Jecelyn Yeen
Jecelyn Yeen

Puppeteer spricht jetzt mit Firefox! 🎉 Aber Moment, hast du das nicht schon getan? 🤔 WebDriver BiDi, das neue Protokoll in Puppeteer, beschäftigen uns damit, was diese aufregende Entwicklung für den Firefox-Automatisierungsworkflow bedeutet.

WebDriver BiDi ist ein neues standardisiertes browserübergreifendes Automatisierungsprotokoll, das das Beste von WebDriver Classic und dem Chrome DevTools Protocol (CDP) kombiniert. Sie verspricht bidirektionale Kommunikation, die eine effizientere und leistungsstärkere Automatisierung sowie detaillierte Kontrolle ermöglicht. In der offiziellen Roadmap können Sie den Fortschritt verfolgen.

Seit unserem letzten Statusupdate arbeiten wir weiterhin eng mit der W3C Browser Testing and Tools Working Group zusammen. Dank der Fortschritte von WebDriver BiDi implementiert Puppeteer jetzt Funktionen wie Protokollierung, Netzwerkereignisse und Formularübermittlungen.

Code anzeigen

Das folgende Puppeteer-Skript zeigt WebDriver BiDi in Aktion und funktioniert reibungslos in Chrome und Firefox:

  1. Starten Sie den ausgewählten Browser mit der Protokolleinstellung.
  2. Überwachen Sie Konsolennachrichten auf Fehler.
  3. Navigieren Sie zu einer Webseite, legen Sie die Abmessungen des Darstellungsbereichs fest und klicken Sie auf eine Schaltfläche.
  4. Textinhalt überprüfen und Gleichheit bestätigen
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 messen, haben wir die umfassende Puppeteer-Testsuite verwendet. Obwohl die Implementierung von Puppeteer und WebDriver BiDi noch in Arbeit ist und noch nicht alle Glanzstücke von Puppeteer mit Chrome und CDP aufweist, möchten wir Ihnen ein klares Bild davon geben, wo die Dinge stehen.

Firefox:

  • WebDriver BiDi hat ein Qualitätsniveau erreicht, das für praktische Automatisierungsaufgaben geeignet ist. Mozilla hat die Puppeteer-Tests für pdf.js von Firefox und CDP zu Firefox und WebDriver BiDi portiert.
  • Über 55% der Tests bestehen erfolgreich mit WebDriver BiDi und zeigen damit die wachsende Funktionalität.
  • In über 82 neuen Tests wird WebDriver BiDi effizient eingesetzt, was den Weg für weitere Verbesserungen ebnet.

Chrome:

  • Chrome erreicht derzeit mit WebDriver BiDi eine Erfolgsquote von 68% und bietet damit zuverlässige Funktionen. Im Vergleich zum CDP-basierten Ansatz gibt es zwar noch Raum für weitere Optimierungen, aber diese vielversprechende Entwicklung ist vielversprechend.

Bestimmte Funktionen wie der Cookie-Zugriff, das Abfangen von Netzwerkanfragen, bestimmte Emulationsfunktionen und Berechtigungen werden noch aktiv standardisiert. Sie werden in Puppeteer integriert, sobald sie bereit 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 unterstützt?

Während Puppeteer zuvor experimentelle Unterstützung für Firefox mit einer begrenzten und nicht browserübergreifenden CDP-Implementierung bot, war die Lösung nicht nachhaltig.

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

Möglicherweise haben Sie weitere Fragen, z. B.:

  • Wird die CDP-Unterstützung von Firefox eingestellt?
  • Werden alle Puppeteer-Funktionen unterstützt?

Ausführliche Antworten und weitere Informationen finden Sie in der speziellen Ankündigung von Firefox.

Aufregende Zeiten vor dir

Browserübergreifende Tests gehören zu den wichtigsten Bedürfnissen von Entwicklern. Daher freuen wir uns, die Integration von WebDriver BiDi in Puppeteer zu führen, was einen Wendepunkt für eine nahtlosere und effizientere browserübergreifende Automatisierung darstellt. Wir empfehlen Ihnen, WebDriver BiDi mit Puppeteer zu erkunden.

Künftig wird WebDriver BiDi zum Standardprotokoll für Puppeteer und ebnet den Weg für eine einheitliche und verbesserte Automatisierung.

Probleme beim Ausführen von Puppeteer-Tests mit WebDriver BiDi können Sie in unserem Puppeteer Issue Tracker melden.