Puppeteer Now Supports Firefox: As of version 23, the Puppeteer library has first-class support for Firefox. It's easy to write automation and perform end-to-end testing using Puppeteer with both Chrome and Firefox.

• How to Use: Set the product to "firefox" when starting Puppeteer. For example:

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
browser: "firefox"
});

const page = await browser.newPage();
//...
await browser.close();

Key Features:

• Capturing Log Messages: Useful for testing web apps. Set up a listener on the console event to log messages. Example:

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
browser: "firefox"
});

const page = await browser.newPage();
page.on('console', msg => {
console.log(`[console] ${msg.type()}: ${msg.text()}`);
});

await page.evaluate(() => console.debug('Some Info'));
await browser.close();

• Device Emulation: Simulate different screen dimensions and device pixel ratios. Example:

import puppeteer from "puppeteer";

const device = puppeteer.KnownDevices["Pixel 5"];

const browser = await puppeteer.launch({
browser: "firefox"
});

const page = await browser.newPage();
await page.emulate(device);

const viewport = page.viewport();

console.log(
`[emulate] Pixel 5: ${viewport.width}x${viewport.height}` +
` (dpr=${viewport.deviceScaleFactor}, mobile=${viewport.isMobile})`
);

await page.goto("https://www.mozilla.org");
await browser.close();

• Network Interception: Track and intercept network requests. Useful for avoiding third-party service requests and providing mock data. Example:

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
browser: 'firefox'
});

const page = await browser.newPage();
await page.setRequestInterception(true);

page.on("request", request => {
if (request.url().includes(".woff2")) {
  // Block requests to custom user fonts.
  console.log(`[intercept] Request aborted: ${request.url()}`);
  request.abort();
} else {
  request.continue();
}
});

const response = await page.goto("https://support.mozilla.org");
console.log(
`[navigate] status=${response.status()} url=${response.url()}`
);
await browser.close();

• Preload Scripts: Inject custom JavaScript functionality before a page loads. Use exposeFunction and MutationObserver. Example:

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
browser: 'firefox',
});

const page = await browser.newPage();

const gotMessage = new Promise(resolve =>
page.exposeFunction("sendMessage", async message => {
  console.log(`[script] Message from pre-load script: ${message}`);
  resolve();
})
);

await page.evaluateOnNewDocument(() => {
const observer = new MutationObserver(mutationList => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      for (const node of mutation.addedNodes) {
        if (node.tagName === "TITLE") {
          sendMessage(node.textContent);
        }
      }
    }
  };
});

observer.observe(document.documentElement, {
  subtree: true,
  childList: true,
});
});

await page.goto("https://support.mozilla.org");
await gotMessage;
await browser.close();

Technical Background:

• Before, there were two main choices for browser automation: WebDriver API (HTTP-based) or browser-specific APIs (e.g. Chrome DevTools Protocol or Firefox's Remote Debugging Protocol). Both have tradeoffs.
• WebDriver BiDi is developed to bring automation features to a standardized protocol that can be implemented by any browser and used by any automation tooling.
• Mozilla sees standardizing protocols as a key part of their manifesto and web vision.