使用 Puppeteer 检测和测试 Chrome 扩展程序

Question

有没有办法使用 Puppeteer 测试 Chrome 扩展程序？例如，扩展程序能否检测到 Chrome 以“测试”模式启动以提供不同的 UI、检查内容脚本是否正常工作等？

Answer 1

在puppeteer.launch() 中传递--user-agent 是一种使用自定义值覆盖浏览器UA 的有用方法。然后，您的扩展程序可以在其后台页面中回读 navigator.userAgent 并识别 Chrome 是使用 Puppeteer 启动的。此时，您可以提供不同的代码路径来测试 crx 与正常操作。

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 中的“tabs”权限。

---

测试扩展页面

假设您想测试您的弹出页面 UI？一种方法是直接导航到其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/274673