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

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

始める前に

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

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

テストの作成

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

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

pacakge.json:

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

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

ステップ 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 を更新して、ブラウザを起動して閉じます。多数のテストを実行する場合は、同じブラウザの使用を検討できます。ただし、テスト間の分離が弱くなり、あるテストが別のテストの結果に影響を与える可能性があるため、通常はおすすめしません。

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: 現在の状態をアサートする

拡張機能が期待どおりに動作していない場合にテストが失敗するように、何かをアサートします。ポップアップには最近アクセスしたページが表示されることがわかっているため、1 つ表示されているか確認してみましょう。

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 リファレンスには、使用できる機能に関する詳細情報が記載されています。ここで説明していない機能も多数あります。