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

问题描述

是否可以使用Puppeteer测试Chrome扩展程序?例如，扩展程序可以检测到Chrome是在测试"模式下启动的，以提供不同的用户界面，检查内容脚本是否正常运行吗?

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.

假设您要测试弹出页面的用户界面?一种方法是直接导航到其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

这篇关于使用Puppeteer检测和测试Chrome扩展程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！