Wykorzystaj możliwości WebDriver BiDi: automatyzację w Chrome i Firefoksie za pomocą Puppeteer

Puppeteer komunikuje się teraz z Firefoxem 🎉 Ale zaraz, czy to nie było już zrobione? 🤔 Poznaj WebDriver BiDi, nowy protokół w Puppeteer, i dowiedz się, jak ta ekscytująca nowość wpłynie na proces automatyzacji w Firefox.

WebDriver BiDi to nowy, ustandaryzowany protokół automatyzacji w różnych przeglądarkach, który łączy w sobie to, co najlepsze w klasycznym WebDriverze i protokole Chrome DevTools (CDP). Zapewnia dwukierunkową komunikację, co umożliwia bardziej wydajną i wszechstronną automatyzację oraz precyzyjną kontrolę. Postępy w wdrażaniu możesz śledzić na oficjalnym planie rozwoju.

Od poprzedniego uaktualnienia stanu nadal ściśle współpracujemy z grupą roboczą W3C ds. testowania przeglądarek i narzędzi. Dzięki ulepszeniom w WebDriver BiDi Puppeteer obsługuje teraz funkcje takie jak rejestrowanie, zdarzenia sieciowe i przesyłanie formularzy.

Pokaż kod

Ten skrypt Puppeteer pokazuje działanie WebDriver BiDi i działa bezproblemowo w Chrome i Firefoksie:

  1. Uruchom wybraną przeglądarkę z ustawieniem protokołu.
  2. Sprawdzaj komunikaty konsoli pod kątem błędów.
  3. Otwórz stronę internetową, ustaw wymiary widocznego obszaru i kliknij przycisk.
  4. Zweryfikuj zawartość tekstu i deklaruj równość.
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();

Wprowadzenie WebDriver BiDi w Puppeteer

Aby ocenić możliwości WebDriver BiDi w Puppeteer, użyliśmy kompleksowego zestawu testów Puppeteer. Implementacja BiDi w Puppeteer i WebDriver jest wciąż w toku i nie obejmuje jeszcze wszystkich funkcji Puppeteer w Chrome i CDP, ale chcemy przedstawić Ci aktualny stan prac.

Firefox:

  • WebDriver BiDi osiągnął poziom jakości odpowiedni do praktycznych zadań związanych z automatyzacją. Mozilla przepisała testy Puppeteer dla pdf.js z Firefoxa i CDP na Firefoxa i WebDriver BiDi.
  • Ponad 55% testów z powodzeniem zalicza się do WebDriver BiDi, co świadczy o jego rosnącej funkcjonalności.
  • Warto zauważyć, że ponad 82 nowe testy skutecznie korzystają z WebDriver BiDi, co otwiera drogę do dalszych ulepszeń.

Chrome:

  • Chrome osiąga obecnie 68-procentowy wskaźnik powodzenia w przypadku WebDrivera BiDi, co świadczy o niezawodności tej funkcji. Chociaż w porównaniu z podchodem opartym na CDP jest jeszcze miejsce na dalszą optymalizację, ta metoda zapowiada ciekawe zmiany w przyszłości.

Niektóre funkcje, takie jak dostęp do plików cookie, przechwytywanie żądań sieciowych, określone funkcje emulacji i uprawnienia, są nadal w trakcie aktywnej standaryzacji. Gdy będą gotowe, zostaną zintegrowane z Puppeteer. W międzyczasie zapoznaj się z pełną listą funkcji Puppeteer obsługiwanych przez WebDriver BiDi.

Czy aplikacja Puppeteer nie obsługiwała już przeglądarki Firefox?

Wcześniej firma Puppeteer oferowała eksperymentalną obsługę przeglądarki Firefox w ramach ograniczonej implementacji CDP bez korzystania z różnych przeglądarek, jednak dotknęła ona pewne ograniczenia i nie była ona trwałym rozwiązaniem.

Nowa eksperymentalna implementacja BiDi w Firefoxie i WebDriverze rozwiązuje te problemy.

Zdajemy sobie sprawę, że możesz mieć dodatkowe pytania, takie jak:

  • Czy obsługa CDP w Firefox zostanie wycofana?
  • Czy wszystkie funkcje Puppeteer są obsługiwane?

Aby uzyskać szczegółowe odpowiedzi i więcej informacji, przeczytaj specjalne ogłoszenie Firefoxa.

Czeka nas ekscytujący czas

Testowanie w wielu przeglądarkach było jednym z najważniejszych potrzeb programistów, dlatego z przyjemnością informujemy, że prowadzimy integrację WebDriver BiDi z Puppeteer. Jest to punkt zwrotny na drodze do płynniejszego i wydajniejszego automatyzowania testów w wielu przeglądarkach. Zachęcamy do zapoznania się z WebDriver BiDi za pomocą Puppeteer.

W przyszłości WebDriver BiDi stanie się domyślnym protokołem dla Puppeteer, torując drogę dla spójnego i skutecznego procesu automatyzacji.

W przypadku problemów z testami Puppeteer z użyciem WebDriver BiDi twórz zgłoszenia w śledzeniu problemów z Puppeteer.