WebDriver BiDi:2023 年狀態更新

Mathias Bynens
Mathias Bynens

本文將概略說明 2023 年 WebDriver BiDi 的新功能。

什麼是 WebDriver BiDi?

WebDriver 是定義為 W3C 標準的瀏覽器自動化通訊協定,可以在 ChromeDriver、GeckoDriver 和 WebKitDriver 中實作。

Chromium 也有專屬的瀏覽器自動化通訊協定:Chrome 開發人員工具通訊協定 (簡稱 CDP)。

這兩種通訊協定之間存在基本差異:WebDriver 是可互通的標準,但通訊協定的效率較差,也缺少 CDP 具備的功能。相反地,CDP 更有效率且功能強大,但互通性較少。

因此,W3C 瀏覽器測試與工具工作小組於 2020 年開始在 WebDriver BiDi 上推出,這個新的標準瀏覽器自動化通訊協定可彌補 WebDriver Classic 和 CDP 通訊協定之間的鴻溝。最棒的是,閱讀「回顧:測試自動化的演變」和「WebDriver BiDi (跨瀏覽器自動化技術的未來發展)」一文,瞭解更多背景資訊。

WebDriver BiDi 的努力包括標準化工作、建立網路平台測試,以及針對不同瀏覽器引擎實作。

我們現在在哪裡?

在 2022 年,Chrome/ChromeDriver 106Firefox 102 都會支援 WebDriver BiDi 標準。

自那以後,WebDriver BiDi 開始採用熱門架構,透過啟用記錄支援等眾所期盼的功能,解決開發人員最棘手的問題。

記錄功能採用 WebDriver BiDi

常見的情況是自動驗證網頁是否載入任何控制台記錄、警告或錯誤,以及沒有未偵測到的 JavaScript 例外狀況。另一個使用情境是,您可能會想要編寫自動化測試,檢查網頁是否記錄警告或擲回例外狀況。而傳統版 WebDriver 並不會解決這些問題,因為這不是雙向的。WebDriver BiDi 現已推出這項功能。

以下是使用 Selenium 的 JavaScript 語言繫結的第二個應用實例:

import * as assert from 'node:assert';
import { Builder, LogInspector } from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome.js';

const driver = new Builder()
  .forBrowser('chrome')
  .setChromeOptions(new chrome.Options().enableBidi())
  .build();

const inspector = await LogInspector(driver);
await inspector.onConsoleEntry((entry) => {
  console.log(`Console message received: [${
    entry.type}][${entry.level}] ${entry.text}`);
});

await driver.get('https://www.selenium.dev/selenium/web/bidi/logEntryAdded.html');
await driver.findElement({ id: 'consoleLog' }).click();

await driver.quit();

以下是 Puppeteer 的實驗性 WebDriver BiDi 支援使用範例:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  protocol: 'webDriverBiDi',
  headless: 'new',
});

const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

page.on('console', (message) => {
  console.log(`Console message received: [${
    message.type()
  }] ${message.text()}`);
});

await page.goto(`https://www.selenium.dev/selenium/web/bidi/logEntryAdded.html`);
await page.evaluate(() => {
  document.querySelector('#consoleLog').click();
});

await browser.close();

您也可以透過其他抽象化方式 (例如 WebdriverIO) 使用同樣的功能。

共用的公開藍圖

我們仍在與其他瀏覽器廠商和參與 W3C 工作小組的產業相關人士合作,共同撰寫 WebDriver BiDi 規格。該組織最近同意分享藍圖,根據未來規範和實施方向,以明確向使用者呈現的端對端使用情境為出發點。

互通性

隨著工作小組共同指定更多功能,我們也為 WebDriver BiDi 通訊協定建立網路平台測試。這個共用測試套件可協助我們驗證實作項目的正確性和互通性。您可以在 WPT 資訊主頁上查看各種瀏覽器的最新測試結果。

支援 WebDriver BiDi:您需要什麼協助?

你期待在未來使用 WebDriver BiDi 進行瀏覽器自動化嗎?表達支持的方式如下:

  • 成為早期測試人員和採用者,協助形塑 WebDriver BiDi 的未來。
  • 快分享這個好消息!並使用主題標記 #WebDriverBiDi 在社群媒體上分享專案。
  • 請求贊助。您可以提出功能要求,或是先確認慣用的工具採用 WebDriver BiDi。
  • 參與規格討論