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

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

チュートリアルについては、Puppeteer による Chrome 拡張機能のテストをご覧ください。Chrome 拡張機能の単体テストの作成方法については、単体テストをご覧ください。

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

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

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

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

拡張機能 ID の設定

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

拡張機能ページのテスト

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

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

現時点では、別のページのコンテキストで広告表示オプションのポップアップを開くことはできません。代わりに、新しいタブでポップアップの 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 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);'
);

Service Worker の終了のテスト

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

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