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

2022-01-14 00:00:00 automated-tests puppeteer google-chrome-extension javascript

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

Is there a way to test a Chrome extension using Puppeteer? For example can an extension detect that Chrome was launched in "test" mode to provide different UI, check content scripts are working, etc?

推荐答案

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

Passing --user-agent in puppeteer.launch() is a useful way to override the browser's UA with a custom value. Then, your extension can read back navigator.userAgent in its background page and identify that Chrome was launched with Puppeteer. At that point, you can provide different code paths for testing the crx vs. normal operation.

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 字符串，那就很棘手了.

Alternatively, if you wanted to preserve the browser's original UA string, it gets tricky.

  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 中的权限.

Note: The downside is that this approach requires the "tabs" permission in manifest.json.

假设您想测试您的弹出页面 UI?一种方法是直接导航到它的 chrome-extension:// URL，然后使用 puppeteer 进行 UI 测试:

Let's say you wanted to test your popup page UI? One way to do that would be to navigate to its chrome-extension:// URL directly, then use puppeteer to do the UI testing:

// 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

To create a stable extension id for testing, check out: https://stackoverflow.com/a/23877974/274673

相关文章