充分發揮 WebDriver BiDi 的力量：Chrome 和 Firefox 的自動化功能 Puppeteer

Jecelyn Yeen

Puppeteer 現在可與 Firefox 互動！🎉? 但等一下，不是已經這樣做了嗎？🤔? 讓我們深入瞭解 WebDriver BiDi，這是 Puppeteer 中的新通訊協定，並探索這項令人振奮的進展對 Firefox 自動化工作流程有何意義。

WebDriver BiDi 是全新的標準化跨瀏覽器自動化通訊協定，結合了 WebDriver 傳統版和 Chrome DevTools 通訊協定 (CDP) 的優點。這項功能可提供雙向通訊，讓自動化功能更有效率、功能更強大，並提供精細的控制選項。您可以在官方路線圖上追蹤進度。

自上次更新狀態以來，我們持續與 W3C 瀏覽器測試和工具工作小組密切合作。多虧 WebDriver BiDi 的進步，Puppeteer 現在已實作記錄、網路事件和表單提交等功能。

請出示程式碼

以下 Puppeteer 指令碼展示 WebDriver BiDi 的運作情形，並可在 Chrome 和 Firefox 上流暢運作：

  1. 啟動所選瀏覽器並設定通訊協定。
  2. 監控控制台訊息，瞭解是否有錯誤。
  3. 前往網頁、設定可視區域尺寸，然後按一下按鈕。
  4. 驗證文字內容並斷言相等。
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();

Puppeteer 中 WebDriver BiDi 的進度

為了評估 Puppeteer 中 WebDriver BiDi 的功能，我們使用了全面的 Puppeteer 測試套件。雖然 Puppeteer 和 WebDriver BiDi 的實作方式仍在開發中，且尚未提供所有 Puppeteer 與 Chrome 和 CDP 的功能，但我們想讓您清楚瞭解目前的情況。

Firefox:

  • WebDriver BiDi 的品質已達到可用於實際自動化工作的程度。Mozilla 已成功移植 pdf.js 的 Puppeteer 測試，從 Firefox 和 CDP 移植到 Firefox 和 WebDriver BiDi。
  • 超過 55% 的測試在 WebDriver BiDi 中成功通過，證明其功能日益增強。
  • 值得一提的是，超過 82 項新測試能有效使用 WebDriver BiDi，為進一步強化測試奠定基礎。

Chrome：

  • Chrome 目前透過 WebDriver BiDi 達到 68% 的通過率，展現可靠的功能。雖然與以 CDP 為基礎的方法相比，這項方法還有進一步最佳化的空間，但這項技術仍有助於推動未來的發展。

某些功能 (例如 Cookie 存取、網路要求攔截、特定模擬功能和權限) 仍在積極標準化中。這些功能準備就緒後，就會整合至 Puppeteer。在此期間，請查看WebDriver BiDi 支援的 Puppeteer 功能完整清單。

Puppeteer 不是已經支援 Firefox 了嗎？

雖然 Puppeteer 先前曾透過 CDP 的有限非跨瀏覽器實作方式，為 Firefox 提供實驗性支援，但這項做法受到限制，並非可持續使用的解決方案。

新的實驗性 Firefox 和 WebDriver BiDi 實作解決了這些問題。

我們知道你可能還有其他問題，例如：

  • Firefox 是否即將停止支援 CDP？
  • 是否支援所有 Puppeteer 功能？

如需詳細解答和更多資訊，請參閱 Firefox 專屬公告！

令人期待的未來

跨瀏覽器測試一直是開發人員最重視的需求，因此我們很高興能帶頭將 WebDriver BiDi 整合至 Puppeteer，這代表著我們已轉向提供更順暢、更有效率的跨瀏覽器自動化體驗。建議您使用 Puppeteer 探索 WebDriver BiDi。

日後，WebDriver BiDi 將最終成為 Puppeteer 的預設通訊協定，為一致且強大的自動化體驗鋪路。

如果在使用 WebDriver BiDi 執行 Puppeteer 測試時遇到任何問題，請在 Puppeteer Issue Tracker 中回報問題。