Harness the power of WebDriver BiDi: Chrome and Firefox automation with Puppeteer

Jecelyn Yeen

Puppeteer now talks to Firefox! 🎉 But wait, didn't it already? 🤔 Let's dive into WebDriver BiDi, the new protocol in Puppeteer and discover what this exciting development means for the Firefox automation workflow.

WebDriver BiDi is a new standardized cross-browser automation protocol that combines the best of WebDriver Classic and Chrome DevTools Protocol (CDP). It promises bi-directional communication, enabling more efficient and more capable automation, and granular control. You can track its progress on the official roadmap.

Since our previous status update, we've continued working closely with the W3C Browser Testing and Tools Working Group. Puppeteer now implements features like logging, network events, and form submissions, thanks to WebDriver BiDi advancements.

Show me the code

The following Puppeteer script showcases WebDriver BiDi in action, and works seamlessly on Chrome and Firefox:

  1. Launch your chosen browser with the protocol setting.
  2. Monitor console messages for errors.
  3. Navigate to a web page, set viewport dimensions, and click a button.
  4. Verify text content and assert equality.
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();

Progress of WebDriver BiDi in Puppeteer

To gauge the capabilities of WebDriver BiDi in Puppeteer, we used the comprehensive Puppeteer test suite. While the Puppeteer and WebDriver BiDi implementation is still a work in progress and doesn't have all the bells and whistles of Puppeteer with Chrome and CDP just yet, we want to give you a clear picture of where things stand.

Firefox:

  • WebDriver BiDi has reached a level of quality suitable for practical automation tasks. Mozilla has successfully ported the Puppeteer tests for pdf.js from Firefox and CDP to Firefox and WebDriver BiDi.
  • Over 55% of tests successfully pass with WebDriver BiDi, demonstrating its growing functionality.
  • Notably, over 82 new tests use WebDriver BiDi efficiently, paving the way for further enhancements.

Chrome:

  • Chrome is currently achieving a 68% pass rate with WebDriver BiDi, demonstrating reliable functionality. While there's room for further optimization compared to the CDP-based approach, this promising exciting future developments.

Certain features like cookie access, network request interception, specific emulation features, and permissions are still under active standardization. They will be integrated into Puppeteer once they're ready. In the meantime, check out the full list of Puppeteer features supported by WebDriver BiDi.

Didn't Puppeteer already support Firefox?

While Puppeteer previously offered experimental support for Firefox using a limited and non-cross-browser implementation of CDP, it suffered from limitations and wasn't a sustainable solution.

The new experimental Firefox and WebDriver BiDi implementation addresses these issues.

We know you might have additional questions like:

  • Is Firefox's CDP support going away?
  • Are all Puppeteer features supported?

For detailed answers and more information, check out the dedicated announcement from Firefox!

Exciting times ahead

Cross-browser testing has been one of the top developer needs so we're excited to lead the integration of WebDriver BiDi into Puppeteer, which marks a turning point toward a more seamless and efficient cross-browser automation experience. We encourage you to explore WebDriver BiDi with Puppeteer.

Looking forward, WebDriver BiDi will eventually become the default protocol for Puppeteer, paving the way for a consistent and empowered automation experience.

For any issues you experience when running Puppeteer tests with WebDriver BiDi, open issues in our Puppeteer issue tracker.