web-dev-qa-db-ja.com

検出とテストChrome Puppeteerを使用した拡張機能

Puppeteerを使用してChrome拡張機能をテストする方法はありますか？たとえば、拡張機能がChromeが「テスト」モードで起動されて異なるUIを提供するために起動されたことを検出できます。コンテンツスクリプトなどが機能していることを確認しますか？

google-chrome-extensionautomated-testspuppeteer
16
ebidel

puppeteer.launch()で_--user-agent_を渡すと、ブラウザのUAをカスタム値でオーバーライドするのに役立ちます。その後、拡張機能はバックグラウンドページで_navigator.userAgent_を読み戻し、ChromeがPuppeteerで起動されたことを識別できます。その時点で、crxとvs.通常の操作。

puppeteer_script.js

_const puppeteer = require('puppeteer');

const CRX_PATH = '/path/to/crx/folder/';

puppeteer.launch({
  headless: false, // extensions only supported in full chrome.
  args: [
    `--disable-extensions-except=${CRX_PATH}`,
    `--load-extension=${CRX_PATH}`,
    '--user-agent=PuppeteerAgent'
  ]
}).then(async browser => {
  // ... do some testing ...
  await browser.close();
});
_

拡張background.js

_chrome.runtime.onInstalled.addListener(details => {
  console.log(navigator.userAgent); // "PuppeteerAgent"
});
_

あるいは、ブラウザの元のUA文字列を保持したい場合は、注意が必要です。

  1. Chromeを起動し、Puppeteerに空白のページを作成します。
  2. タイトルをカスタム名に設定します。
  3. バックグラウンドスクリプトでタブのタイトルの更新を検出します。
  4. 後で再利用するグローバルフラグを設定します。

background.js

_let LAUNCHED_BY_PUPPETEER = false; // reuse in other parts of your crx as needed.

chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
  if (!LAUNCHED_BY_PUPPETEER && tab.title.includes('PuppeteerAgent')) {
    chrome.tabs.remove(tabId);
    LAUNCHED_BY_PUPPETEER = true;
  }
});
_

puppeteer_script.js

_const puppeteer = require('puppeteer');

const CRX_PATH = '/path/to/crx/folder/';

puppeteer.launch({
  headless: false, // extensions only supported in full chrome.
  args: [
    `--disable-extensions-except=${CRX_PATH}`,
    `--load-extension=${CRX_PATH}`,
  ]
}).then(async browser => {
  const page = await browser.newPage();
  await page.evaluate("document.title = 'PuppeteerAgent'");

  // ... do some testing ...

  await browser.close();
});
_

注：欠点は、このアプローチにはmanifest.jsonの「タブ」権限が必要なことです。

拡張ページのテスト

ポップアップページのUIをテストしたいとしましょう。これを行う1つの方法は、_chrome-extension://_ URLに直接移動してから、puppeteerを使用してUIテストを実行することです。

_// Can we navigate to a chrome-extension page? YES!
const page = await browser.newPage();
await page.goto('chrome-extension://ipfiboohojhbonenbbppflmpfkakjhed/popup.html');
// click buttons, test UI elements, etc.
_

テスト用の安定した拡張IDを作成するには、以下をチェックしてください。 https://stackoverflow.com/a/23877974/27467

16
ebidel