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

Question

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

- ebidel

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. 在Puppeteer中启动Chrome并创建一个空白页面。
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”权限。

---

测试扩展页面

假设您想测试弹出式页面的用户界面，一种方法是直接导航到其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://dev59.com/1mAg5IYBdhLWcg3wM4hb#23877974

- ebidel

---

我错误地认为CRX_PATH指向要加载的扩展名为.crx的存档文件，但它实际上是您的'manifest.json'所在的文件夹。 - Eric Majerus

另外需要注意的是，在执行如此操作之前，必须添加--disable-extensions-except和--load-extension参数，可以参照这个答案来完成对chrome-extension:// URL的导航。 - Eric Majerus

如果您只想点击扩展按钮怎么办？ - Sachi

从上面的答案和评论中，这一点最初并不清楚（尽管它们已经说明了），但是你不需要为你正在开发的本地扩展创建一个CRX文件。相反，你可以将CRX_PATH指向你正在工作的文件夹，就像@EricMajerus建议的那样。这意味着你会使用“加载未打包的扩展程序”的方法将同一个文件夹侧载到Chrome中。所以对我来说，我最终在我的setup.js文件中添加了const CRX_PATH = '/Users/alex/git/imdb-age';。 - alex

你能展示一段使用Puppeteer在Chrome扩展程序中以编程方式执行按钮点击的示例代码吗？ - Selaka Nanayakkara