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

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

Jecelyn Yeen

Twitter GitHub ホームページ

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 は、Firefox と CDP の Puppeteer テストを Firefox と WebDriver BiDi に正常に移行しました。
WebDriver BiDi はテストの 55% 以上に合格し、その成長を実証しています。
特に、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 限定のお知らせをご覧ください。

エキサイティングな時期が先へ

ブラウザ間のテストは、デベロッパーのニーズの最も高まるものの一つであったため、Google は WebDriver BiDi を Puppeteer に統合し、よりシームレスで効率的なクロスブラウザの自動化エクスペリエンスへの転換点となりました。Puppeteer で WebDriver BiDi を使ってみることをおすすめします。

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

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