简介
@pollyjs/adapter-puppeteer 是一个 npm 包，用于在 Puppeteer 环境中记录并重放 http 请求和响应。其中，@pollyjs 是一个用于 web 提供端到端测试的免费、开源工具，它支持多种语言和框架。
本文主要介绍如何使用 @pollyjs/adapter-puppeteer 在 Puppeteer 环境中进行端到端测试。
安装
在项目目录下，通过 npm 安装 @pollyjs/adapter-puppeteer 包：
npm install @pollyjs/adapter-puppeteer --save-dev
使用场景
假设我们有一个 Web 应用，它需要使用一些后端 API 接口来进行数据交互。我们希望在测试环境中自动化地测试这个应用，包括它的前端和后端。
但在测试中，我们可能需要多次发送同一个请求，以及在不同的环境下执行测试。如果这些请求都发送到了生产环境，那么就会产生一些不必要的测试数据、资源浪费和统计数据扭曲等问题。
为了解决这些问题，我们可以使用 @pollyjs/adapter-puppeteer 在 Puppeteer 环境中记录并重放 http 请求和响应。这样，我们就可以在测试过程中使用一些虚拟数据，而不是对同一个请求不断地发送到生产环境中。
基本使用
首先，需要安装 puppeteer 包以进行 Puppeteer 环境的模拟：
npm install puppeteer --save-dev
接着，我们需要引入 @pollyjs/adapter-puppeteer 包。在测试文件的开头添加以下代码：
const Polly = require('@pollyjs/core').Polly;
const PuppeteerAdapter = require('@pollyjs/adapter-puppeteer').PuppeteerAdapter;然后在测试函数中，创建并启用一个 Polly 对象：
-- -------------------- ---- -------
-------------- ------------- -- -- -
-- ------ - --- ----- -------- --- ---- ----
--- ------
---------------- -- -- -
----- - --- ------------------ -
--------- -------------------
--------------- -
---------- -- ---------- ------- --------- --
-
---
----- ----------------
---
--------------- -- -- -
----- -------------------
---
---------- ----- ----- -- --- ---- ----- -- -- -
-- ---- ---- ----
---
---在 Polly 构造函数中，我们为 Polly 实例设置一个名称 "TestSuite"。包含 adapters 属性的配置对象表示 Polly 将记录哪些请求和响应，针对 Puppeteer 环境，我们要使用 PuppeteerAdapter。
adapterOptions 配置项告诉 Polly 如何与 Puppeteer 环境进行交互，其中 puppeteer 属性是一个已启动的 Puppeteer 浏览器实例，在测试之前需初始化。
connect 方法将 Polly 连接到 Puppeteer 浏览器实例，disconnect 方法则将其断开连接。
在测试函数中，我们可以使用 polly 对象来记录并重放网络请求。例如：
-- -------------------- ---- -------
---------- ----- ----- -- --- ---- ----- -- -- -
-- ------ --- ----- -------
------------
--------------------------------------
---------------- ---- -- -
--------------------
---
-- ------- --- -----
----- ---------------------------------------
----- -------------------------------- --------------------
----- ----------------------------------- ------------
----- ------------------------------------
-- ------ ---- --- ----- ---------
------------ -----------------------------------
---在这个示例中，我们首先使用 polly 对象记录了一个 POST 请求到 https://api.example.com/login 路径，而后，我们填写表单并签入，使得发出对该请求的POST请求，保证了该部分相关业务逻辑和正式环境下一致，从而完成了对登录操作的端到端测试。
包含选择器的请求拦截
你还可以使用 PuppeteerAdapter 提供的带选择器的 intercept 方法，该方法接收一个选择器和一个回调函数，当选择器匹配到的元素被点击时，就会执行回调函数。
例如，我们可以在测试页面上记录相关表格的下拉选择数据（mock），实现代码如下：
-- -------------------- ---- -------
---------- -------- ------- ----- -- -- -
------------
------------------------------------------
--------------------- -------- ----- ---- -- -
--------------------
-----------
------ ------- ---
------ -
-- -
------ ------- ---
------ -
-- -
------ ------- ---
------ -
----
---
-- -------- -- ---- ---- --- ------ ---------
----- --------------------------------------
----- ------- - ----- ---------------- -- ----------------------------------------------- --------------- -- -- ------ -------------- ------ ------- -----
--------------------------------
------ ------- ---
------ ---
-- -
------ ------- ---
------ ---
-- -
------ ------- ---
------ ---
----
---在这个示例中，我们在 https://api.example.com/table-data 的 GET 请求中，通过 intercept 方法提供了一个选择器: .dropdown select，来查找 HTML 页面中的 dropdown 组件。在该请求匹配的选择器处，我们将响应体设置为一个 JSON 对象，包含了需要的数据。
Mock 响应
Polly 还提供了灵活的 API，让你可以对请求响应进行灵活配置。
例如，以下代码将对 https://api.example.com/user 地址下的 GET 请求进行记录，并返回一个状况编码为 200 的 JSON 响应和一个数据体：
-- -------------------- ---- -------
---------- ------- ---- ------------- ----- -- -- -
------------
------------------------------------
---------------- ---- -- -
--------------------
----------
----- -------
---- --
---
---
-- -------- -- ---- ---- --- ------ ---- ----
----- --------------------------------------
----- -------- - ----- ---------------- -- --------------------------------------------------------------
--------------------------------
----- -------
---- --
---
---在这个示例中，我们使用 .intercept 方法配置了一个捕获该请求的响应，其中我们以JSON格式将响应的userName返回。
Proxy
如果你想让 Puppeteer 浏览器与一个使用代理连接的代理服务器交互，你可以使用 adapterOptions 中的 proxy 选项进行配置。
-- -------------------- ---- -------
--- ---------------- - ---
-- ------------------------ -
----- - --------- ----- -------- - - --- ----------------------------
---------------- - -
----- -
--------------------------------------- ---------------------------
-
--
-
-----
---------------- -- -- -
------- - ----- -----------------------------------
-----
---在这个示例中，我们在 Puppeteer 配置文件中查找 HTTP_PROXY 环境变量，它的内容为代理服务器的 URL。如果找到了该环境变量，则初始化浏览器实例时，将代理服务器的 URL 添加到 args 中。
在 Polly 的 adapterOptions 中，我们只需要将同样的代理服务器 URL 设置到 proxy 中即可。
polly = new Polly('test', {
adapters: [PuppeteerAdapter],
logging: false,
adapterOptions: {
puppeteer: browser,
proxy: process.env.HTTP_PROXY
}
});结束语
通过使用 @pollyjs/adapter-puppeteer，我们可以轻松地模拟网络请求和响应，使测试更加稳定和可重复，同时还可以节省测试成本。由于其易于使用和高度灵活的 API，它成为了前端开发和测试过程中的必备工具，你可以在你的测试代码中添加它，以方便地测试所有网络相关操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/133561