このページは Cloud Translation API によって翻訳されました。

WebDriver BiDi を活用: Puppeteer による Chrome と Firefox の自動化

Jecelyn Yeen

Puppeteer が Firefox と連携するようになりました。🎉? でも、すでに終了していないのですか？🤔? Puppeteer の新しいプロトコルである WebDriver BiDi について詳しく説明し、このエキサイティングな開発が Firefox 自動化ワークフローにどのような影響を与えるかを説明します。

WebDriver BiDi は、WebDriver Classic と Chrome DevTools Protocol（CDP）の長所を組み合わせた、新しい標準化されたクロスブラウザ自動化プロトコルです。双方向の通信により、より効率的で高度な自動化ときめ細かい制御が可能になります。進捗状況は公式ロードマップで確認できます。

前回のステータス更新以降、Google は W3C ブラウザテストとツールのワーキンググループと緊密に連携してきました。WebDriver BiDi の進歩により、Puppeteer にロギング、ネットワークイベント、フォーム送信などの機能が実装されました。

コードを表示

次の Puppeteer スクリプトは、WebDriver BiDi の動作を示しています。Chrome と Firefox でシームレスに動作します。

プロトコル設定を使用して、選択したブラウザを起動します。
コンソールメッセージでエラーを確認します。
ウェブページに移動し、ビューポートのサイズを設定してボタンをクリックします。
テキストの内容を確認し、同等性をアサートします。

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 の専用の発表をご覧ください。

今後の展望

クロスブラウザテストはデベロッパーのニーズトップの 1 つであるため、WebDriver BiDi を Puppeteer に統合する取り組みをリードできることを嬉しく思います。これは、よりシームレスで効率的なクロスブラウザ自動化エクスペリエンスへの転換点となります。Puppeteer で WebDriver BiDi を試すことをおすすめします。

今後、WebDriver BiDi は Puppeteer のデフォルトプロトコルになり、一貫性のある高度な自動化エクスペリエンスの実現につながります。

WebDriver BiDi で Puppeteer テストを実行する際に問題が発生した場合は、Puppeteer Issue Tracker で問題を報告してください。