在前端开发中，测试是非常重要的环节之一。随着网站和应用程序愈发复杂，单元测试已经不足以满足测试需求。这时，端到端测试变得越来越重要。
Puppeteer 是一个基于 Node.js 的高度可用、基于 Chrome 的测试工具。结合 Jest 测试框架，可以极大地简化端到端测试，并提高代码覆盖率。
本篇文章将指导你如何使用 Puppeteer 和 Jest 进行端到端测试。将会覆盖如下内容：
- 安装和配置 Puppeteer 和 Jest
- 编写简单的端到端测试代码
- 如何使测试代码更灵活和可维护
1. 安装和配置 Puppeteer 和 Jest
首先，我们需要安装 Puppeteer 和 Jest。可以通过 npm 安装：
npm install puppeteer jest --save-dev
接下来，为 Jest 创建配置文件（jest.config.js）：
module.exports = {
testEnvironment: "node",
};testEnvironment 选项将覆盖默认的 testEnvironment 并使用 Node.js 环境。
为了让 Puppeteer 在测试中运行，还需要创建一个新的测试环境，此处我们将使用 Jest 提供的测试程序：
-- -------------------- ---- ------- ----- --------- - --------------------- -------------- - ----- -------- ------------- - -- ----------- ----- ------- - ----- ------------------- -- ------- --------- --------- --------------------------------- - --------------------- --
这个代码将会启动一个新的浏览器实例，并将 WebSocket 端点传递给测试程序。我们将在后面的步骤中使用这个端点来连接 Puppeteer。
最后，启动 Jest 单元测试：
npx jest
2. 编写简单的端到端测试代码
Jest 现在已经配置完成，接下来可以开始编写端到端测试代码了。
在开始之前，需要明确定义要测试的场景，通常会涉及以下内容：
- 测试对象的页面 URL
- 页面上应该如何与用户进行交互
- 期望视觉和结果
由于 Puppeteer 是基于 Chrome 浏览器的，我们可以使用 Chrome 开发者工具进行交互。例如，我们可以使用 click 方法单击页面上的按钮：
await page.click("#button-id");或者，我们可以通过 evaluate 方法来直接执行 JavaScript 代码：
await page.evaluate(() => {
// some JavaScript code
});另一个方面，可以使用 Jest 提供的断言库进行测试结果的比较：
test("shows an error message when login fails", async () => {
// test code here
expect(message).toContain("Error");
});下面是一个简单的例子：
-- -------------------- ---- -------
--------------------- ----- ------ -- -- -
--- --------
--- -----
--------------- -- -- -
------- - ----- -------------------
------------------ ----------------------------------
---
---- - ----- ------------------
---
-------------- -- -- -
----- -------------
----- ---------------------
---
----------- -- ----- ------- ---- ----- ------- ----- -- -- -
----- ---------------------------------------
----- ---------------------- ---------------
----- ---------------------- ---------------
----- ----------------------
----- ------- - ----- ---------------- -- -
------ -----------------------------------------------------
---
-----------------------------------
---
---这个例子使用 Puppeteer 访问登录表单页面，键入错误的用户名和密码，并单击提交按钮。最后，它将检查页面上是否显示了错误消息，并返回实际消息内容与期望的内容进行比较。
3. 如何使测试代码更灵活和可维护
当要测试的应用程序变得复杂时，端到端测试代码的写法可能会变得非常冗长。为了避免这种情况，在编写端到端测试时，通常会遵循一些编码标准来使测试代码更易于维护、灵活。
以下是一些代码编写的最佳实践：
- 将常用的元素和操作抽象出来并封装为函数，减少重复代码和冗余测试
- 在编写测试代码之前编写测试场景和用例，按照其功能进行组织
- 使用 .env 文件存储敏感的配置信息，如密码和 API 令牌
- 对于测试输入和数据类型，使用随机数据生成器生成数据以确保测试尽可能复杂和全面
下面是一些示例代码：
-- -------------------- ---- ------- -- -------------- ----- -------- ----------------- --- - ----- ------------------------------- ----- --------------------- ------ ------------------ - -------------- - ------------
-- -------------------- ---- ------- -- ------------ ----- ----------- - ------------------------- ----- -------- ----------- --------- --------- - ----- --- - ---------------------------- ----- --------------- ----- ----------------------------------- ---------- ----- ----------------------------------- ---------- ----- ----------------- ---------- ------ ------------------ - -------------- - - ------ --
-- -------------------- ---- -------
-- -----------------
----- - ----- - - -----------------------
--------------------- ----- ------ -- -- -
--- --------
--- -----
--------------- -- -- -
------- - ----- -------------------
------------------ ----------------------------------
---
---- - ----- ------------------
---
-------------- -- -- -
----- -------------
----- ---------------------
---
----------- -- ----- ------- ---- ----- ------- ----- -- -- -
----- -------- - --------------
----- -------- - --------------
----- ----------- --------- ----------
----- ------- - ----- ---------------- -- -
------ -----------------------------------------------------
---
-----------------------------------
---
---在这些代码中，clickButton.js 和 loginPage.js 文件分别抽象出了单击按钮和登录操作。因此，当测试登录表单时，只需要调用 login 函数，并提供所需的参数即可。
除此之外，dotenv 包也可以被用来存储和读取 .env 文件中的环境变量和配置。要设置 .env 文件，请在项目根目录下创建一个 .env 文件，按照以下格式添加键值对：
PASSWORD=124kj#@343JKJKj API_TOKEN=13nlv34n12pk13jnkfvn2lmkf
最后，在测试中可以使用以下代码设置环境变量：
require("dotenv").config();
const password = process.env.PASSWORD;
const apiToken = process.env.API_TOKEN;使用这些技巧和最佳实践，就可以更轻松、更高效地编写端到端测试代码了。
结论
在本文中，我们学习了如何使用 Puppeteer 和 Jest 进行端到端测试，并使用最佳实践来使测试代码更灵活、可维护。端到端测试可以帮助检测应用程序中的潜在错误和问题，从而提高代码质量和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ef4cbe6fbf9601972ea0fe