JS 浏览器扩展自动化 - 使用 Puppeteer 控制扩展行为的测试方案

使用Puppeteer可自动化测试JS浏览器扩展，通过启动带扩展的Chrome实例，模拟用户交互并验证功能。首先安装Puppeteer并配置launch选项加载扩展，建议设置headless为false以便调试。利用--load-extension参数指定扩展路径，可选--disable-extensions-except确保仅加载目标扩展。获取扩展ID需访问chrome://extensions页面查看。测试时可通过page.goto()打开popup页面，用page.evaluate()调用background script或执行content script相关操作。对于content script测试，需导航至具体网页并在页面上下文中注入元素或触发行为，并结合断言库如assert验证结果。处理权限请求时可添加--disable-permissions-api启动参数禁用弹窗，但需注意权限API不可用的影响。在CI环境中建议使用Docker保证环境一致性，启用headless模式运行，并通过环境变量管理配置信息，集成Jest等框架生成测试报告，提升测试效率与可靠性。

使用 Puppeteer 可以自动化测试你的 JS 浏览器扩展，模拟用户与扩展的交互，验证功能是否正常。这允许你构建更健壮、更可靠的扩展程序。

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。你可以使用它来模拟用户在浏览器中的行为，例如点击按钮、填写表单、导航到不同的页面等等。

解决方案：

要使用 Puppeteer 控制浏览器扩展，你需要做以下几件事：

1. 安装 Puppeteer：

   npm install puppeteer

   登录后复制

2. 启动带有扩展的 Chrome：

   你需要告诉 Puppeteer 启动 Chrome 时加载你的扩展。这通常涉及指定扩展的路径。

   const puppeteer = require('puppeteer');
   
   (async () => {
     const browser = await puppeteer.launch({
       headless: false, // 建议设置为 false，方便调试
       args: [
         `--load-extension=${'/path/to/your/extension'}`,
         '--disable-extensions-except=/path/to/your/extension' // 可选，只加载指定扩展
       ]
     });
   
     const page = await browser.newPage();
     // ... 你的测试代码
   })();

   登录后复制

   • headless: false

     登录后复制
     意味着你会看到浏览器窗口，这对于调试非常有用。

   • --load-extension

     登录后复制
     参数告诉 Chrome 加载指定路径下的扩展。

   • --disable-extensions-except

     登录后复制
     参数（可选）可以确保只加载你的扩展，防止其他扩展干扰测试。

3. 与扩展交互：

   一旦 Chrome 启动并加载了你的扩展，你就可以使用 Puppeteer 的 API 与它进行交互。这可能涉及：

   • 打开扩展的 popup 页面。
   • 调用扩展的 background script 中的函数。
   • 在页面上执行 JavaScript 代码来与扩展交互。

   例如，要打开扩展的 popup 页面，你可以使用

   browser.newPage()

   登录后复制
   创建一个新页面，然后导航到扩展的 popup URL：

   const extensionId = 'your-extension-id'; // 从 Chrome 的扩展管理页面获取
   const popupURL = `chrome-extension://${extensionId}/popup.html`;
   await page.goto(popupURL);

   登录后复制

   要调用 background script 中的函数，你可以使用

   page.evaluate()

   登录后复制
   在页面上下文中执行 JavaScript 代码：

   await page.evaluate(() => {
     chrome.runtime.sendMessage({ action: 'doSomething' });
   });

   登录后复制

4. 断言：

   

   Robovision AI

   一个强大的视觉AI管理平台

   65

   查看详情

   在与扩展交互后，你需要使用断言来验证扩展的行为是否符合预期。你可以使用 Node 的

   assert

   登录后复制
   模块或任何其他你喜欢的断言库。

   const assert = require('assert');
   
   // 示例：验证扩展是否在页面上添加了某个元素
   const elementExists = await page.evaluate(() => {
     return document.querySelector('#my-extension-element') !== null;
   });
   assert.strictEqual(elementExists, true, '扩展未添加预期元素');

   登录后复制

如何获取 Chrome 扩展的 ID？

在 Chrome 浏览器中，打开

chrome://extensions/

如何测试扩展的 Content Script？

测试 Content Script 稍微复杂一些，因为 Content Script 是在网页上下文中运行的。 你需要导航到一个网页，然后使用 Puppeteer 与 Content Script 交互。

await page.goto('https://example.com'); // 导航到一个测试页面

// 假设你的 Content Script 在页面上添加了一个按钮
await page.evaluate(() => {
  const button = document.createElement('button');
  button.id = 'my-extension-button';
  button.textContent = 'Click Me';
  document.body.appendChild(button);
});

// 点击按钮
await page.click('#my-extension-button');

// 验证点击按钮后的行为
const message = await page.$eval('#message', el => el.textContent);
assert.strictEqual(message, 'Button Clicked!', '消息不正确');

关键在于使用

page.evaluate()

如何处理扩展的权限请求？

当你的扩展需要访问某些权限时，Chrome 会显示一个权限请求对话框。 你可以使用 Puppeteer 自动批准或拒绝这些请求。

不幸的是，Puppeteer 本身没有直接的 API 来处理权限请求。 一个常见的解决方法是禁用权限请求。 这可以通过在启动 Chrome 时添加

--disable-permissions-api

const browser = await puppeteer.launch({
  headless: false,
  args: [
    `--load-extension=${'/path/to/your/extension'}`,
    '--disable-permissions-api'
  ]
});

禁用权限请求意味着你的扩展将无法访问需要权限的 API。 因此，你需要仔细考虑这是否适合你的测试场景。 另一种方法是使用 Chrome 的自动化 API 来模拟用户点击 "允许" 或 "拒绝" 按钮，但这通常更复杂。

如何进行持续集成 (CI) 测试？

将 Puppeteer 测试集成到 CI 系统中可以帮助你确保你的扩展在每次代码更改后都能正常工作。

以下是一些建议：

• 使用 Docker： 使用 Docker 容器来创建一个一致的测试环境。 这可以避免由于不同的操作系统或依赖项版本而导致的问题。
• 配置 headless 模式： 在 CI 环境中，通常需要在 headless 模式下运行 Chrome。 这可以通过将

  headless

  登录后复制
  选项设置为

  true

  登录后复制
  来实现。
• 使用 CI 系统的环境变量： 将扩展的路径、ID 和其他配置信息存储在 CI 系统的环境变量中。 这可以使你的测试代码更具可移植性。
• 生成测试报告： 使用 Jest、Mocha 或其他测试框架来生成测试报告。 这可以帮助你快速识别和修复问题。

总的来说，使用 Puppeteer 控制浏览器扩展的测试是一个强大的工具，可以帮助你构建更可靠的扩展程序。 虽然它可能需要一些设置和配置，但它带来的好处是值得的。 通过自动化测试，你可以确保你的扩展在各种情况下都能正常工作，并减少手动测试的工作量。

以上就是JS 浏览器扩展自动化 - 使用 Puppeteer 控制扩展行为的测试方案的详细内容，更多请关注php中文网其它相关文章！