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

WebDriver BiDi による自動化が BrowserStack で利用可能に

Matthias Rohmer

Chrome のブラウザ自動化チームは、過去 3 年間にわたり、BrowserStack などの他の主要なブラウザおよびツールベンダーと連携して、WebDriver BiDi を作成してきました。これは、ブラウザ間で双方向の自動化ワークフローを可能にする新しいブラウザ自動化プロトコルです。これまで、これらのワークフローは、Chromium ベースのブラウザで独自の Chrome DevTools プロトコルを使用してのみ可能でした。

本日、BrowserStack を皮切りに、WebDriver BiDi がデベロッパー向けの本番環境対応としてリリースされます。これは、この共同プロジェクトの重要なマイルストーンとなります。

Selenium と BrowserStack

先日、BrowserStack は Selenium の公式開発パートナーになりました。Selenium は、WebDriver BiDi にも貢献している、成熟したオープンソースのブラウザ自動化フレームワークです。このパートナーシップは、活発なテストエコシステムへの BrowserStack の継続的な投資を証明しています。BrowserStack は、Selenium のコアメンテナーも複数雇用しています。

Selenium プロジェクトの一部である Selenium Grid を使用すると、複数のデバイスでテストを並行して実行できます。しかし、独自に Grid を設定し、何十種類もの異なるデバイスを入手して維持し、それらを利用できるように維持することは、人によっては困難または不可能なこともあります。

BrowserStack などのホスト型 Selenium Grid ソリューションを使用すると、自分で管理することなく、さまざまなプラットフォームやデバイスでテストを簡単に実行できます。

Selenium Grid での WebDriver BiDi

Selenium は WebDriver 標準に基づいていますが（BiDi がないことに注意してください）が、しばらく前から WebDriver BiDi が試験運用版としてサポートされていました。本日より、BrowserStack がホストする Selenium Grid の本番環境で WebDriver BiDi コマンドを使用できるようになりました。

これにより、リクエストのインターセプト、高度なエミュレーション、ブラウザイベントのリアルタイム処理などの機能が、Chrome だけでなく、WebDriver BiDi をサポートするすべてのブラウザで利用可能になりました。

次の例は、BrowserStack で WebDriver BiDi を使用してログイベントをリッスンする方法を示しています。キャッチされたログは、automate.browserstack.com でも確認できます。

const webdriver = require('selenium-webdriver');

// Insert credentials from https://www.browserstack.com/accounts/profile/details
const USERNAME = '<YOUR_USERNAME>';
const ACCESS_KEY = '<YOUR_ACCESS_KEY>';

(async () => {
  const driver = await (new webdriver.Builder()
    .withCapabilities({
      browserName: 'chrome',
      'bstack:options': {
        seleniumVersion: '4.22.0',
        seleniumBidi: true, // Enable WebDriver BiDi.
      },
    })
    .usingServer(
      `https://${USERNAME}:${ACCESS_KEY}@hub-cloud.browserstack.com/wd/hub`
    )
    .build());

  // Add a listener for log events.
  await driver.script().addConsoleMessageHandler((logEntry) => {
    console.log(logEntry.text);
  });

  await driver.get(
    'https://www.selenium.dev/selenium/web/bidi/logEntryAdded.html'
  );

  // Trigger a console log on the demo page.
  await driver.findElement({ id: 'consoleLog' }).click();
  await driver.quit();

  // Inspect logs on automate.browserstack.com!
})();

BrowserStack は始まりにすぎない

Chrome ブラウザ自動化チームは、本日 WebDriver の BiDi サポートをリリースした BrowserStack チームを祝福します。また、今後数週間のうちに、BrowserStack、Selenium などの他のツール、その他の主要なブラウザでも WebDriver BiDi のサポートが拡大される予定です。

このお知らせでテストに興味を持たれたものの、まだテストを始めていない場合は、web.dev の Learn Testing コースをぜひご覧ください。