针对 Chrome 扩展程序的端到端测试

端到端测试涉及构建扩展程序软件包并将其加载到浏览器中。测试工具会与浏览器通信，以自动执行互动并测试用户要经历的相同流程。支持端到端测试的库通常会提供控制浏览器、模拟用户输入和观察任何打开的网页的当前状态的方法。

如需查看教程，请参阅使用 Puppeteer 测试 Chrome 扩展程序；如需详细了解如何为 Chrome 扩展程序编写单元测试，请参阅单元测试。

使用浏览器测试库

一系列测试库都支持扩展程序。

库	指南
Puppeteer / Playwright	请参阅 Chrome 扩展程序 (Puppeteer / Playwright)。
硒	使用 ChromeOptions 对象加载扩展程序。如需了解详情，请点击此处。
WebDriverIO	请参阅Web 扩展程序测试。

在无头 Chrome 中运行测试

在自动化工作流中运行测试时，通常需要在没有屏幕的机器上加载您的扩展程序。借助 Chrome 的全新无头模式，Chrome 可以在这种无人值守的环境中运行。使用 --headless=new 标志启动 Chrome（无头模式目前默认为“旧版”，不支持加载扩展程序）。根据您选择的自动化工具，其中可能有一个设置可自动为您添加此标志。

设置扩展程序 ID

在测试中，通常需要使用固定的扩展程序 ID。这样，许多常见任务都变得更加轻松，例如在扩展程序需要与之通信的服务器上将扩展程序的来源列入许可名单，或在测试中打开扩展程序页面。为此，请按照保持一致的扩展程序 ID 下的步骤操作。

测试扩展程序页面

您可以使用相应的网址（例如 chrome-extension://<id>/index.html）访问扩展程序页面。使用您选择的自动化工具中提供的常规导航方法导航到这些网址。

测试扩展程序弹出式窗口

目前无法在其他网页中打开扩展程序弹出式窗口。请改为在新标签页中打开弹出式窗口的网址。如果弹出式窗口使用活动标签页，请考虑实现一个替换机制，这样就可以将标签页 ID 显式传递到弹出式窗口。例如：

const URL_PARAMS  = new URLSearchParams(window.location.search);

async function getActiveTab() {
  // Open popup.html?tab=5 to use tab ID 5, etc.
  if (URL_PARAMS.has("tab")) {
    return parseInt(URL_PARAMS.get("tab"));
  }

  const tabs = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  return tabs[0];
}

检查扩展程序状态

为避免在更改扩展程序的内部行为时测试失败，一般而言，最佳做法是避免在集成测试中访问内部状态。相反，您应根据用户可见的内容进行测试。但是，有时需要直接从扩展程序访问数据。在这些情况下，请考虑在扩展程序页面上下文中执行代码。

在 Puppeteer 中：

const workerTarget = await browser.waitForTarget(
  target => target.type() === 'service_worker'
);
const worker = await workerTarget.worker();

const value = await worker.evaluate(() => {
  chrome.storage.local.get('foo');
});

在 Selenium 中：

// Selenium doesn't allow us to access the service worker, so we need to open an extension page where we can execute the code
await driver.get('chrome-extension://<id>/popup.html');
await driver.executeAsyncScript(
  'const callback = arguments[arguments.length - 1];' +
  'chrome.storage.local.get(\'foo\').then(callback);'
);

测试 Service Worker 终止

如需了解如何测试 Service Worker 终止，请参阅使用 Puppeteer 测试 Service Worker 终止。我们还提供了一个适用于 Puppeteer 和 Selenium 的示例。

请注意，使用某些测试框架时，服务工件可能不会像在正常使用中那样自动终止。在 Selenium 中就是如此。它依赖于 ChromeDriver，后者会将一个调试程序连接到所有 Service Worker，以防止它们停止。