Puppeteer 与浏览器版本兼容性：自动化测试的最佳实践

news2024/10/28 2:20:02

Puppeteer 支持的浏览器版本映射：从 v20.0.0 到 v23.6.0

自 Puppeteer v20.0.0 起，这个强大的自动化库开始支持与 Chrome 浏览器的无头模式和有头模式共享相同代码路径，为自动化测试带来了更多便利。从 v23.0.0 开始，Puppeteer 进一步扩展了其支持范围，包括了 Firefox 浏览器的稳定版本。在本文中，我们将详细探讨 Puppeteer 支持的浏览器版本，以及如何确保你的自动化测试环境与这些浏览器兼容。
在这里插入图片描述

Puppeteer 的浏览器支持历史

Puppeteer 的发展历程中，对不同浏览器的支持情况如下：

v20.0.0 之前：Puppeteer 主要与 Chromium 浏览器一起使用。
v20.0.0 起：开始支持 Chrome 浏览器的无头模式和有头模式。
v23.0.0 起：增加了对 Firefox 浏览器稳定版本的支持。

支持的浏览器版本映射

以下是 Puppeteer 版本与对应的支持浏览器版本映射表，帮助你选择合适的 Puppeteer 版本以适配特定的浏览器：

Puppeteer 版本	Chrome 版本	Firefox 版本
v23.6.0	130.0.6723.58	131.0.3
v23.5.3	129.0.6668.100	131.0.2
v23.5.2	129.0.6668.91	131.0
v23.5.0	129.0.6668.89	131.0
v23.4.1	129.0.6668.70	130.0.1
v23.4.0	129.0.6668.58	130.0.1
…	…	…
v20.0.0	112.0.5615.121	Firefox Nightly

CLI命令和配置信息

你提供的CLI命令和配置信息是为了管理和配置Puppeteer在项目中的行为。下面是解释和如何执行这些步骤的详细说明：

1. 运行CLI以下载新配置：

如果你想要为你的项目下载和管理浏览器配置，可以使用以下命令：

对于纱（Yarn）项目：
```
yarn add puppeteer
```
对于PNPM项目：
```
pnpm add puppeteer
```
使用npx来安装并运行Puppeteer的浏览器安装脚本：
```
npx puppeteer browsers install
```

这个命令会下载并安装Puppeteer依赖的浏览器（例如Chromium）。

2. 更改默认缓存位置：

从Puppeteer版本19.0.0开始，默认情况下，Puppeteer会将下载的浏览器存储在全局缓存目录~/.cache/puppeteer中。如果你需要更改这个默认行为，可以在你的项目目录下创建一个.puppeteerrc.cjs配置文件。
下面是如何创建和配置.puppeteerrc.cjs文件：

在你的项目根目录下创建一个名为.puppeteerrc.cjs的文件。
将以下内容复制并粘贴到该文件中：

const { join } = require('path');
/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  // Changes the cache location for Puppeteer.
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

这个配置文件将Puppeteer的缓存目录更改为你项目目录下的.cache/puppeteer。

确保你的项目使用的是CommonJS模块系统，因此文件扩展名是.cjs。
如果你使用的是ES模块，那么文件名应该是.puppeteerrc.js，并且你需要使用export关键字而不是module.exports。
完成这些步骤后，当你再次安装Puppeteer或者运行相关的脚本时，它将使用你指定的缓存目录。这有助于避免在不同构建环境中可能出现的缓存问题。

确保 Puppeteer 与浏览器版本的兼容性

确保 Puppeteer 与浏览器版本的兼容性是进行自动化测试时的一个重要考虑因素。以下是一些步骤和建议，帮助你确保 Puppeteer 脚本能够在不同版本的浏览器上正常运行：

检查浏览器兼容性：
定期查看 Puppeteer 的官方文档，了解其支持的浏览器版本。Puppeteer 通常会支持最新的稳定版本的 Chromium 和 Firefox。
使用最新版本的 Puppeteer：
保持 Puppeteer 更新到最新版本，这样可以确保你使用的是与最新浏览器版本兼容的 Puppeteer。

测试前的浏览器检查：
在脚本开始时，检查浏览器的版本信息，确保它在 Puppeteer 支持的范围内。如果版本不兼容，可以提醒用户更新浏览器或使用其他支持的版本。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const browserVersion = await browser.version();
  console.log(`Browser version: ${browserVersion}`);
  // 可以添加逻辑来检查版本并做出相应的处理
  await browser.close();
})();

使用特性检测：
在你的 Puppeteer 脚本中，使用特性检测来确定当前浏览器是否支持某个特定的 API 或功能。这可以避免在不支持的浏览器上运行时出现错误。
使用无头模式的兼容性选项：
当使用无头模式时，可以通过设置 args 参数来指定一些兼容性选项，例如模拟不同的用户代理或其他启动参数。
跨浏览器测试：
使用跨浏览器测试服务，如 BrowserStack 或 Sauce Labs，这些服务提供了不同浏览器和操作系统的测试环境。
监听和处理错误：
在你的 Puppeteer 脚本中添加错误处理逻辑，以便在出现兼容性问题时能够优雅地处理。
保持代码的灵活性：
编写灵活的代码，以便在不同的浏览器版本之间进行切换时，可以快速适应。
使用功能标志：
对于某些实验性或版本特定的功能，使用功能标志来控制这些功能的启用和禁用。
编写可维护的代码：
编写清晰、模块化的代码，这样在浏览器更新后，你可以更容易地更新和维护你的 Puppeteer 脚本。
监控社区动态：
关注 Puppeteer 和浏览器开发者社区的动态，了解即将到来的更改和潜在的兼容性问题。
自动化测试：
设置自动化测试管道，定期运行你的 Puppeteer 脚本，确保在浏览器更新后脚本仍然能够正常工作。