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

叶杰林
Jecelyn Yeen
Twitter GitHub 首页

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();

Puppeteer 中的 WebDriver BiDi 进度

为了衡量 Puppeteer 中的 WebDriver BiDi 功能，我们使用了全面的 Puppeteer 测试套件。虽然 Puppeteer 和 WebDriver BiDi 实现仍在开发中，并且尚不具备 Chrome 和 CDP 中的 Puppeteer 的所有附加功能，但我们希望让您清楚地了解相关情况。

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