PuppeteerがFirefoxを公式にサポート — WebDriver BiDi標準に則った初の複数ブラウザサポート

FirefoxがPuppeteerを公式サポート

8月8日、MozillaはPuppeteerブラウザ自動化ライブラリがバージョン23からFirefoxを公式にサポートすることを発表した。これにより、Puppeteerを用いた自動化とエンドツーエンドのテストが簡単に行えるようになり、ChromeとFirefoxの両方で実行できるようになる。

Puppeteerとは

PuppeteerはGoogleが提供するオープンソースのNode.jsライブラリであり、ChromeやChromiumブラウザのヘッドレス（GUIなし）モードを制御するためのツールである。開発者はPuppeteerを使用して、ウェブページのスクリーンショット撮影、PDF生成、ウェブスクレイピング、自動化テストなどを行うことができる。Puppeteerはブラウザを直接制御できるため、高度な操作やテストが可能であり、特にフロントエンド開発者やテストエンジニアにとって有用である。

主な機能

ページナビゲーションと操作: Puppeteerを使用すると、ページのナビゲーション、クリック、テキスト入力、フォーム送信など、ユーザーがブラウザで行う操作を自動化できる。
スクリーンショットとPDF生成: ウェブページ全体または特定の要素のスクリーンショットを撮影したり、ページをPDFとして保存することができる。
ネットワークインターセプション: ネットワークリクエストをインターセプトし、レスポンスをモックしたり、リクエストヘッダーを変更することができる。
デバイスエミュレーション: モバイルデバイスのビューポートサイズやデバイスピクセル比をエミュレートすることができる。

PuppeteerとFirefoxの使い方

FirefoxでPuppeteerを使用するには、Puppeteerを起動する際にproductを"firefox"に設定するだけでよい。

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

Puppeteerは、Chromeと同様に最新の安定版Firefoxをダウンロードして起動できるため、どちらのブラウザでも同じ開発者体験が期待できる。

Puppeteerが提供する機能は多くの開発者にとって驚きではないが、複数のブラウザをサポートすることは大きな進展である。Firefoxのサポートは、WebDriver BiDiというクロスブラウザプロトコルに基づいており、このプロトコルはW3Cで標準化が進められている。このクロスブラウザプロトコルの使用により、将来的には多くの異なるブラウザをサポートすることが容易になる。

利用例

ログメッセージのキャプチャ

import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
  browser: 'firefox'
});
const page = await browser.newPage();
// consoleイベントを監視
page.on('console', msg => {
  console.log(`[console] ${msg.type()}: ${msg.text()}`);
});
await page.evaluate(() => console.debug('Some Info'));
await browser.close();

出力例:

[console] debug: Some Info

デバイスエミュレーション

import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
  browser: 'firefox'
});
const page = await browser.newPage();
// Pixel 5デバイスをエミュレーション
const device = puppeteer.KnownDevices['Pixel 5'];
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();

出力例:

[emulate] Pixel 5: 393x851 (dpr=3, mobile=true)

ネットワークインターセプション

テスト時にネットワークリクエストを追跡およびインターセプトできることは一般的な要件である。インターセプションは、テスト中にサードパーティのサービスへのリクエストを回避したり、モックデータを提供したりするのに特に有用である。また、HTTP認証ダイアログを処理したり、リクエストやレスポンスの一部をオーバーライドすることも可能である。

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

出力例:

[intercept] Request aborted: https://assets-prod.sumo.prod.webservices.mozgcp.net/static/Inter-Bold.3717db0be15085ac.woff2
[navigate] status=200 url=https://support.mozilla.org/en-US/

詳細はAnnouncing Official Puppeteer Support for Firefox – Mozilla Hacksを参照していただきたい。