Puppeteer で Chrome 拡張機能をテストする

Puppeteer は、ウェブサイトの自動テストを構築するためのフレームワークを提供します。これには、Chrome 拡張機能をテストする機能も含まれています。これらは、最終的なプロダクトに組み込まれたウェブサイトまたは拡張機能の機能をテストする、高レベルのエンドツーエンド テストです。このチュートリアルでは、サンプル リポジトリから拡張機能の基本的なテストを作成する方法について説明します。

始める前に

chrome-extensions-samples リポジトリのクローンを作成するか、ダウンロードします。テスト用拡張機能として、api-samples/history/showHistory の History API デモを使用します。

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

テストの作成

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

基本的な Node.JS プロジェクトを設定する必要があります。新しいフォルダに、次の内容の package.json ファイルを作成します。

pacakge.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

拡張機能の manifest.json ファイルと同様に、このファイルはすべての Node プロジェクトで必要です。

ステップ 2: Puppeteer と Jest をインストールする

npm install puppeteer jest を実行して、Puppeteer と Jest を依存関係として追加します。これらは package.json ファイルに自動的に追加されます。

スタンドアロンの Puppeteer テストを作成することもできますが、テストランナーとして Jest を使用して、コードに追加の構造を追加します。

ステップ 3: エントリ ポイントを作成する

index.test.js という名前の新しいファイルを作成し、次のコードを追加します。

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';

let browser;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

ステップ 4: ブラウザを起動する

beforeEach と afterEach を更新して、ブラウザを起動および閉じます。多くのテストを実行する場合は、同じブラウザを使用することを検討してください。ただし、テスト間の分離が低下し、1 つのテストが別のテストの結果に影響する可能性があるため、通常はおすすめしません。

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

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

ステップ 5: エイリアスを追加する

テストの実行を容易にするため、package.json ファイルにエイリアスを追加します。

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^21.3.6"
  },
  "scripts": {
    "start": "jest ."
  }
}

これにより、現在のディレクトリ内の .test.js で終わるすべてのファイルが実行されます。

ステップ 6: ポップアップを開く

ポップアップを新しいページで開く基本的なテストを追加しましょう。Puppeteer はポップアップ ウィンドウから拡張機能のポップアップにアクセスできないため、この処理を行う必要があります。以下のコードを追加:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

ステップ 7: 現在の状態をアサートする

拡張機能が想定どおりに動作していない場合にテストが失敗するように、アサートしましょう。ポップアップには最近アクセスしたページが表示されるはずなので、表示されていることを確認しましょう。

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

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

テストを実行するには、npm start を使用します。テストに合格したことを示す出力が表示されます。

プロジェクト全体は、chrome-extensions-samples リポジトリで確認できます。

次のステップ

基本をマスターしたら、独自の拡張機能のテストスイートを作成してみてください。Puppeteer の API リファレンスには、できることの詳細が記載されています。ここに記載されていない機能も多数あります。