利用 WebDriver BiDi 的强大功能：借助 Puppeteer 实现 Chrome 和 Firefox 自动化

Jecelyn Yeen

Puppeteer 现在可以与 Firefox 交互了！🎉? 不过，这不是已经推出了吗？🤔? 让我们深入了解 Puppeteer 中的新协议 WebDriver BiDi，并探索这项激动人心的开发对 Firefox 自动化工作流程的意义。

WebDriver BiDi 是一种新的标准化跨浏览器自动化协议，它结合了 WebDriver Classic 和 Chrome DevTools Protocol (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。
  • 使用 WebDriver BiDi 成功通过了超过 55% 的测试，这证明了其日益增长的功能。
  • 值得注意的是，超过 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 问题跟踪器中提交问题。