Puppeteer を使用して Service Worker の終了をテストする

注: 拡張機能のテストに関する一般的なアドバイスについては、Chrome 拡張機能のエンドツーエンドのテストと Chrome 拡張機能での単体テストをご覧ください。

このガイドでは、Puppeteer を使用して Service Worker の終了をテストし、より堅牢な拡張機能を作成する方法について説明します。いつでも終了を処理できるように準備しておくことが重要です。警告なしに終了してしまうと、Service Worker の非永続的な状態が失われる可能性があります。そのため、重要な状態を保存し、処理するイベントが発生したときに拡張機能が再起動したらすぐにリクエストを処理できる必要があります。

始める前に

chrome-extensions-samples リポジトリのクローンを作成するかダウンロードします。 /functional-samples/tutorial.terminate-sw/test-extension のテスト用拡張機能を使用します。この拡張機能は、ボタンがクリックされるたびに Service Worker にメッセージを送信し、レスポンスを受信するとページにテキストを追加します。

また、Puppeteer が構築されているランタイムである Node.JS もインストールする必要があります。

ステップ 1: Node.js プロジェクトを開始する

新しいディレクトリに次のファイルを作成します。これらを組み合わせて新しい Node.js プロジェクトを作成し、Jest をテストランナーとして使用する Puppeteer テストスイートの基本構造を提供します。この設定について詳しくは、Puppeteer で Chrome 拡張機能をテストするをご覧ください。

重要: このチュートリアルでは、Puppeteer v22.1.0 で追加された WebWorker.close() メソッドを使用します。

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "jest": "^29.7.0",
    "puppeteer": "^22.1.0"
  },
  "scripts": {
    "start": "jest ."
  },
  "devDependencies": {
    "@jest/globals": "^29.7.0"
  }
}

index.test.js:

const puppeteer = require('puppeteer');

const SAMPLES_REPO_PATH = 'PATH_TO_SAMPLES_REPOSITORY';
const EXTENSION_PATH = `${SAMPLES_REPO_PATH}/functional-samples/tutorial.terminate-sw/test-extension`;
const EXTENSION_ID = 'gjgkofgpcmpfpggbgjgdfaaifcmoklbl';

let browser;

beforeEach(async () => {
  browser = await puppeteer.launch({
    // Set to 'new' to hide Chrome if running as part of an automated build.
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

このテストでは、サンプル リポジトリから test-extension が読み込まれます。chrome.runtime.onMessage のハンドラは、chrome.runtime.onInstalled イベントのハンドラで設定された状態に依存します。その結果、Service Worker が終了すると data の内容は失われ、以降のメッセージへの応答は失敗します。この問題は、テストの作成後に修正します。

service-worker-broken.js:

let data;

chrome.runtime.onInstalled.addListener(() => {
  data = { version: chrome.runtime.getManifest().version };
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  sendResponse(data.version);
});

ステップ 2: 依存関係をインストールする

npm install を実行して、必要な依存関係をインストールします。

ステップ 3: 基本的なテストを作成する

次のテストを index.test.js の末尾に追加します。これにより、テスト拡張機能のテストページが開き、ボタン要素をクリックして、Service Worker からのレスポンスを待ちます。

test('can message service worker', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/page.html`);

  // Message without terminating service worker
  await page.click('button');
  await page.waitForSelector('#response-0');
});

npm start を使用してテストを実行すると、正常に完了したことを確認できます。

ステップ 4: Service Worker を終了する

Service Worker を終了する次のヘルパー関数を追加します。

/**
 * Stops the service worker associated with a given extension ID. This is done
 * by creating a new Chrome DevTools Protocol session, finding the target ID
 * associated with the worker and running the Target.closeTarget command.
 *
 * @param {Page} browser Browser instance
 * @param {string} extensionId Extension ID of worker to terminate
 */
async function stopServiceWorker(browser, extensionId) {
  const host = `chrome-extension://${extensionId}`;

  const target = await browser.waitForTarget((t) => {
    return t.type() === 'service_worker' && t.url().startsWith(host);
  });

  const worker = await target.worker();
  await worker.close();
}

最後に、テストを以下のコードに更新します。ここで Service Worker を終了し、ボタンをもう一度クリックしてレスポンスを受け取ったことを確認します。

test('can message service worker when terminated', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/page.html`);

  // Message without terminating service worker
  await page.click('button');
  await page.waitForSelector('#response-0');

  // Terminate service worker
  await stopServiceWorker(page, EXTENSION_ID);

  // Try to send another message
  await page.click('button');
  await page.waitForSelector('#response-1');
});

ステップ 5: テストを実行する

npm start を実行します。テストは失敗します。これは、Service Worker の終了後に応答がなかったことを示します。

ステップ 6: Service Worker を修正する

次に、一時的な状態への依存を解除して Service Worker を修正します。次のコードを使用するように、テスト拡張機能を更新します。このコードは、リポジトリの service-worker-fixed.js に保存されています。

service-worker-fixed.js:

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.local.set({ version: chrome.runtime.getManifest().version });
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  chrome.storage.local.get('version').then((data) => {
    sendResponse(data.version);
  });
  return true;
});

ここでは、Service Worker の存続期間中に状態を保持するために、グローバル変数ではなく chrome.storage.local にバージョンを保存します。ストレージには非同期でしかアクセスできないため、onMessage リスナーから true を返して、sendResponse コールバックが存続するようにしています。

ステップ 7: テストを再実行する

npm start を使用してテストを再度実行します。合格するはずです。

次のステップ

同じ方法を独自の拡張機能に適用できるようになりました。次の点を考慮してください。

• テストスイートを構築して、Service Worker の予期せぬ終了の有無にかかわらず実行できるようにします。その後、両方のモードを個別に実行すると、失敗の原因を明確にできます。
• テスト内のランダムなポイントで Service Worker を終了するコードを記述します。これは、予測が困難な問題を発見するための優れた方法です。
• テストの失敗から学び、今後は防御的なコーディングに取り組みます。たとえば、グローバル変数の使用をやめて、データをより永続的な状態に移行させる lint ルールを追加します。