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 でシームレスに動作します。

  1. プロトコルの設定で、選択したブラウザを起動します。
  2. コンソール メッセージでエラーを確認します。
  3. ウェブページに移動し、ビューポートのサイズを設定してボタンをクリックします。
  4. テキスト コンテンツを検証し、等価性をアサートする。
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 つです。Google は、WebDriver BiDi を Puppeteer に統合する取り組みを主導しています。これは、よりシームレスで効率的なクロスブラウザ自動化エクスペリエンスへの転換点となります。Puppeteer で WebDriver BiDi を試すことをおすすめします。

将来的には、WebDriver BiDi が最終的に Puppeteer のデフォルト プロトコルとなり、一貫性のある便利な自動化エクスペリエンスへの道が開かれます。

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