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

Jecelyn Yeen

Puppeteer 现在可与 Firefox 通信了！🎉? 但是，等一下，是这样吗？🤔? 让我们深入了解 Puppeteer 中的新协议 WebDriver BiDi，并探索这项激动人心的开发对 Firefox 自动化工作流程的意义。

WebDriver BiDi 是一种新的标准化跨浏览器自动化协议，结合了 WebDriver 传统版和 Chrome 开发者工具协议 (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();

WebDriver BiDi 在 Puppeteer 中的进度

为了衡量 Puppeteer 中 WebDriver BiDi 的功能，我们使用了全面的 Puppeteer 测试套件。虽然 Puppeteer 和 WebDriver BiDi 的实现仍在进行中，目前还无法使用 Chrome 和 CDP 来支持 Puppeteer 的所有功能，但我们希望让您清楚地了解情况。

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 问题跟踪器中解决相应问题。