使用 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,  pipe: true,  enableExtensions: [EXTENSION_PATH]  }); }); afterEach(async () => {  await browser.close();  browser = undefined; });

第 5 步：添加别名

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

package.json:

{  "name": "puppeteer-demo",  "version": "1.0",  "dependencies": {  "puppeteer": "^24.8.1"  },  "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 的各种功能，其中包含许多未在此处介绍的功能。