過去三年來,Chrome 的瀏覽器自動化團隊 與 BrowserStack 等主要瀏覽器與工具供應商合作, 建立 WebDriver BiDi (新的瀏覽器自動化通訊協定) 啟用跨瀏覽器的雙向自動化工作流程。這些 先前只能透過專屬的 Chrome 開發人員工具執行工作流程 以 Chromium 為基礎的瀏覽器中的通訊協定。
如今,我們以 WebDriver BiDi 的身分共同努力,的成果相當重要 從 BrowserStack 推出,開發人員終於能夠投入實際工作環境 今天。
Selenium 和 BrowserStack
最近 BrowserStack 成為 Selenium 的官方開發合作夥伴, 但成了成熟的開放原始碼瀏覽器自動化架構,這也造福了 WebDriver BiDi。這項合作是為了讓 BrowserStack 持續改進 協助打造蓬勃發展的測試生態系統,而 BrowserStack 也使用 Selenium 的幾個核心維護人員
Selenium 專案的一部分是 Selenium Grid, 這項功能可讓您在多部裝置上並行執行測試。但將網格設為 獲取和維護數十種不同的裝置 維持這些基礎架構可持續運作並不容易,對某些人來說也不可能。
透過 BrowserStack 這類代管式 Selenium 網格的解決方案, 並跨多種平台和裝置進行測試,
Selenium Grid 上的 WebDriver BiDi
Selenium 以 WebDriver 標準為基礎 (注意:BDiDi 缺少部分),但已有 對 WebDriver BiDi 的實驗性支援一段時間。即日起,您可以使用 透過 BrowserStack 託管的 Selenium Grid,在實際工作環境中使用 WebDriver BiDi 指令!
最後,您就能啟用要求攔截、進階模擬及 會即時處理瀏覽器事件 — 不僅限於 Chrome,更在每 瀏覽器 (支援 WebDriver BiDi)
以下範例顯示如何使用 WebDriver BiDi 監聽記錄事件 。屆時,您也能檢查已擷取的記錄檔 automate.browserstack.com:
const webdriver = require('selenium-webdriver');
// Insert credentials from https://www.browserstack.com/accounts/profile/details
const USERNAME = '<YOUR_USERNAME>';
const ACCESS_KEY = '<YOUR_ACCESS_KEY>';
(async () => {
const driver = await (new webdriver.Builder()
.withCapabilities({
browserName: 'chrome',
'bstack:options': {
seleniumVersion: '4.22.0',
seleniumBidi: true, // Enable WebDriver BiDi.
},
})
.usingServer(
`https://${USERNAME}:${ACCESS_KEY}@hub-cloud.browserstack.com/wd/hub`
)
.build());
// Add a listener for log events.
await driver.script().addConsoleMessageHandler((logEntry) => {
console.log(logEntry.text);
});
await driver.get(
'https://www.selenium.dev/selenium/web/bidi/logEntryAdded.html'
);
// Trigger a console log on the demo page.
await driver.findElement({ id: 'consoleLog' }).click();
await driver.quit();
// Inspect logs on automate.browserstack.com!
})();
BrowserStack 還只是開端
Chrome 瀏覽器自動化團隊恭喜您在 BrowserStack 上負責 今天推出 WebDriver BiDi 支援功能!我們也很期待 發現 WebDriver BiDi 支援之後,擴大了瀏覽器堆疊和其他工具 以及其他主要瀏覽器
如果這則公告讓您感到興奮,但該尚未開始測試 別忘了前往 web.dev 查看「學習測試」課程。