使用 Puppeteer 测试 Chrome 扩展程序

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

前期准备

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

您还需要安装 Node.JS，这是 Puppeteer 构建的基础运行时。

编写测试

第 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 参考文档详细介绍了 Puppeteer 的功能 - 本文未介绍许多功能。