使用 Puppeteer 测试 Chrome 扩展程序

Puppeteer 提供了一个用于构建网站自动化测试的框架，该框架还包括测试 Chrome 扩展程序。这些测试是高层级的端到端测试，用于在将网站或扩展程序构建到最终产品中后测试其功能。在本教程中，我们将演示如何为示例代码库中的扩展程序编写基本测试。

前期准备

克隆或下载 chrome-extensions-samples 代码库。我们将使用 api-samples/history/showHistory 中的 history API 演示作为测试扩展程序。

您还需要安装构建 Puppeteer 的运行时 Node.JS。

编写测试

第 1 步：启动 Node.JS 项目

我们需要设置一个基本的 Node.JS 项目。在新文件夹中，创建一个包含以下内容的 package.json 文件：

pacakge.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

与扩展程序的 manifest.json 文件类似，所有 Node 项目都需要此文件。

第 2 步：安装 Puppeteer 和 Jest

运行 npm install puppeteer jest 以将 Puppeteer 和 Jest 添加为依赖项。它们会自动添加到您的 package.json 文件中。

您可以编写独立的 Puppeteer 测试，但我们将使用 Jest 作为测试运行程序，为代码提供一些额外的结构。

第 3 步：创建入口点

创建一个名为 index.test.js 的新文件，并添加以下代码：

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';

let browser;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

第 4 步：启动浏览器

更新 beforeEach 和 afterEach 以启动和关闭浏览器。运行多项测试时，您可能希望考虑使用同一浏览器。不过，我们通常不建议这样做，因为这会减少测试之间的隔离，并可能导致一项测试影响另一项测试的结果。

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

第 5 步：添加别名

为了更轻松地运行测试，请为 package.json 文件添加一个别名：

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^21.3.6"
  },
  "scripts": {
    "start": "jest ."
  }
}

这将运行当前目录中以 .test.js 结尾的所有文件。

第 6 步：打开弹出式窗口

我们来添加一项基本测试，让其在新页面中打开弹出式窗口。我们之所以需要这样做，是因为 Puppeteer 不支持从弹出式窗口访问扩展程序弹出式窗口。添加以下代码：

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

第 7 步：断言当前状态

让我们断言一些内容，以便在扩展程序未按预期方式运行时，测试失败。我们知道，弹出式窗口应显示最近访问过的网页，因此，我们来看一下看到的内容：

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

第 8 步：运行测试

如需运行测试，请使用 npm start。您应该会看到表明测试已通过的输出。

您可以在我们的 chrome-extensions-samples 代码库中查看完整项目。

后续步骤

掌握基础知识后，请尝试为您自己的扩展程序构建测试套件。Puppeteer API 参考文档包含有关可能实现的详细信息，许多功能未在此介绍。