Chrome 拡張機能のエンドツーエンド テスト

エンドツーエンド テストでは、拡張機能パッケージをビルドしてブラウザに読み込みます。テストツールはブラウザと通信して、ユーザーがたどるフローと同じフローを自動化してテストします。エンドツーエンド テストをサポートするライブラリは、一般的に、ブラウザの制御、ユーザー入力のシミュレーション、開いているページの現在の状態の観察を行う方法を提供します。

チュートリアルについては Puppeteer を使用した Chrome 拡張機能のテストを、Chrome 拡張機能の単体テストの作成の詳細については 単体テストをご覧ください。

ブラウザ テスト ライブラリの使用

拡張機能は、さまざまなテスト ライブラリでサポートされています。

ヘッドレス Chrome でテストを実行する

自動化されたワークフローの一部としてテストを実行する場合、画面のないマシンに拡張機能を読み込む必要があることがよくあります。Chrome の新しいヘッドレス モードを使用すると、このような無人環境で Chrome を実行できます。--headless=new フラグを使用して Chrome を起動します（ヘッドレスは現在デフォルトで「old」に設定されており、拡張機能の読み込みはサポートされていません）。選択した自動化ツールによっては、フラグを自動的に追加する設定がある場合があります。

拡張機能 ID の設定

テストでは、拡張機能 ID を固定することが望ましいことがよくあります。これにより、拡張機能が通信する必要があるサーバーで拡張機能のオリジンを許可リストに登録したり、テスト内で拡張機能のページを開いたりするなど、多くの一般的なタスクが容易になります。手順については、拡張機能 ID の一貫性を維持するをご覧ください。

拡張機能ページのテスト

拡張機能のページには、対応する URL（例: chrome-extension://<id>/index.html）を使用してアクセスできます。これらの URL に移動するには、選択した自動化ツールで使用可能な通常のナビゲーション方法を使用します。

拡張機能のポップアップをテストする

一部のライブラリでは、action.openPopup() API を使用してポップアップを開き、新しいコンテキストへの参照を取得できます。たとえば、Puppeteer は Chrome 拡張機能ガイドでこの方法を説明しています。

選択したライブラリでこれができない場合は、ポップアップの URL を新しいタブで開きます。ポップアップでアクティブなタブを使用している場合は、タブ ID をポップアップに明示的に渡せるオーバーライドの実装を検討してください。次に例を示します。

const URL_PARAMS = new URLSearchParams(window.location.search);

async function getActiveTab() {
  // Open popup.html?tab=5 to use tab ID 5, etc.
  if (URL_PARAMS.has("tab")) {
    return await chrome.tabs.get(parseInt(URL_PARAMS.get("tab")));
  }

  const tabs = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  return tabs[0];
}

拡張機能の状態を検査する

拡張機能の内部動作を変更したときにテストが失敗しないようにするには、一般的に、統合テストで内部状態にアクセスしないようにするのがベスト プラクティスです。代わりに、ユーザーに表示されるものに基づいてテストを行う必要があります。ただし、拡張機能からデータに直接アクセスすることが望ましい場合もあります。このような場合は、拡張機能ページのコンテキストでコードを実行することを検討してください。

Puppeteer の場合:

const workerTarget = await browser.waitForTarget(
  target => target.type() === 'service_worker'
);
const worker = await workerTarget.worker();

const value = await worker.evaluate(() => {
  chrome.storage.local.get('foo');
});

Selenium の場合:

// Selenium doesn't allow us to access the service worker, so we need to open an extension page where we can execute the code
await driver.get('chrome-extension://<id>/popup.html');
await driver.executeAsyncScript(
  'const callback = arguments[arguments.length - 1];' +
  'chrome.storage.local.get(\'foo\').then(callback);'
);

サービス ワーカーの終了をテストする

サービス ワーカーの終了をテストする方法については、Puppeteer を使用してサービス ワーカーの終了をテストするをご覧ください。Puppeteer と Selenium のサンプルもあります。

一部のテスト フレームワークを使用する場合、通常の使用時とは異なり、サービス ワーカーが自動的に終了しないことがあります。これは Selenium の場合です。これは、すべてのサービス ワーカーにデバッガをアタッチして停止を防ぐ ChromeDriver に依存しています。