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

Jecelyn Yeen

Puppeteer 現在可與 Firefox 互動！🎉? 但等一下，不是已經這樣做了嗎？🤔? 讓我們深入瞭解 Puppeteer 中的新通訊協定 WebDriver BiDi，瞭解這對 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 實作仍處於開發階段，目前也還沒推出 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 開啟問題。