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

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

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

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

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

ライブラリ	ガイダンス
操り人形師 / 劇作家	Chrome 拡張機能（Puppeteer / Playwright）をご覧ください。
セレン	拡張機能を読み込むには、ChromeOptions オブジェクトを使用します。詳しくは、こちらをご覧ください。
WebDriverIO	ウェブ拡張機能のテストをご覧ください。

ヘッドレス 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 の終了をテストする

Service Worker の終了のテストについては、Puppeteer で Service Worker の終了をテストするをご覧ください。Puppeteer と Selenium のサンプルも用意されています。

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