The widely-used Puppeteer browser automation library has expanded its capabilities to officially include support for Firefox starting from version 23. This exciting development means developers can now conveniently write and execute automated scripts and perform end-to-end testing across both Chrome and Firefox using Puppeteer.

Seamless Integration

To begin using Puppeteer with Firefox, developers need only to set the product to 'firefox' when launching Puppeteer. This straightforward configuration allows Puppeteer to automatically download and launch the stable version of Firefox, ensuring that developers experience the same seamless experience when working with either browser.

import puppeteer from "puppeteer";
const browser = await puppeteer.launch({
  browser: "firefox"
});
const page = await browser.newPage();
//...
await browser.close();

Cross-Browser Protocol

Behind this support lies a significant technical advancement—utilizing WebDriver BiDi, a cross-browser protocol under standardization by the W3C. This shift means that unlike previous browser-specific protocols, this standardization aims to facilitate broader browser compatibility, making it simpler to support diverse browsers in the future. Mozilla's contribution to this collaboration highlights the positive outcomes of industry-wide collaboration.

Key Features

For seasoned Puppeteer users, the list of features will seem familiar; however, these additional functionalities might be new to others familiar with automation testing ecosystems that typically rely on HTTP-based WebDriver.

Log Message Capture

Ensuring no unexpected errors arise during web application testing is crucial. Puppeteer provides an event-based mechanism to capture log messages, eliminating the need to periodically poll browsers for new logs.

Network Request Interception

Effective during testing, Puppeteer allows interception of network requests to third-party services, the simulation of authentication dialogs, and the modification of HTTP headers. This feature aids in easily controlling the network environment during automated tests.

page.on("request", request => {
  if (request.url().includes(".woff2")) {
    request.abort();
  } else {
    request.continue();
  }
});

Device Emulation

Testing responsive designs has been made effortless. Puppeteer allows for desktop environments to emulate different devices, such as a Pixel 5 phone, to verify layout adaptability on various screen sizes and device pixel ratios.

Preload Scripts

WebDriver BiDi introduces the capability to run "preload" scripts before a page loads, allowing for extensive customization of automation tasks, such as monitoring web page elements and logging changes as they occur.

Technical Innovatives

Previously, automation developers had to select between universal support via the WebDriver API or rich features through browser-specific APIs. This often led to increased costs and complexities. WebDriver BiDi blends the best of both worlds, offering a robust set of features for any browser supporting the protocol, regardless of the programming language in use. The initiative echoes the transformative impact of the Language Server Protocol for programming languages.

In concluding this announcement, Mozilla invites feedback and reports on using Puppeteer within Firefox to refine and prioritize feature enhancements.

For more information on the Puppeteer team's implementation process, refer to their extensive blog post.

Originally reported by Mozilla Hacks.