E2E 测试（End-to-End Testing），即端到端测试，是指在模拟用户操作的情况下，对整个系统进行测试。在前端开发中，E2E 测试是确保网站或 Web 应用程序按照预期运行的关键步骤之一。本文将介绍如何在 Jest 中使用 Puppeteer 进行 E2E 测试，并提供示例代码供参考。
Puppeteer 简介
Puppeteer 是一个由 Google 开发的 Node.js 库，它提供了一个高级 API，可用于控制 Google Chrome 或 Chromium 等浏览器的版本。它可以用于模拟用户交互，并对浏览器和页面进行操作和访问，例如从页面中提取数据或模拟鼠标和键盘输入等。在前端开发中，Puppeteer 通常用于 E2E 测试和爬虫等任务。
安装 Jest 和 Puppeteer
在开始之前，请确保已经安装了 Node.js 和 NPM。如果没有，请前往 Node.js 官网下载安装版本。
接下来，我们将使用 NPM 安装 Jest 和 Puppeteer。在命令行中，输入以下命令：
--- ------- ---------- ---- ---------
这条命令将 Jest 和 Puppeteer 安装在本地项目中。
编写测试代码
接下来，让我们编写一些测试代码来检验我们的安装是否成功。在项目的根目录下，新建一个名为 example.test.js 的文件。此文件包含以下内容：
----- --------- - ---------------------
------------ --------- - ---- -------- -- -- -
------------- ------ ----- -- -- -
----- ------- - ----- -------------------
----- ---- - ----- ------------------
----- ------------------------------------
------------ -----------------------------
----- ----------------
---
---这段代码使用 Jest 和 Puppeteer 启动 Chrome 浏览器，并访问 Google 主页（https://www.google.com）。然后，代码将检查页面标题是否正确，并在完成测试后关闭浏览器。
在命令行中，输入以下命令来运行测试：
--- ----
如果一切正常，输出应该类似于以下内容：
---- -----------------
-- --------- - ---- ------
- --------- ---- ----- ---
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ----- -
--- --- ---- -------快照测试
除了 E2E 测试，Puppeteer 也可以用于测试呈现的页面，以确保其与预期一致。在 Jest 中，这称为“快照测试”。快照测试的目的是将页面的呈现与既存的 “快照” 进行比较。如果两者一致，则测试通过。如果它们不一致，测试将失败，并输出差异。
下面是一个简单的例子。假设我们有一个 test.html 文件，它包含以下内容：
--------- -----
------
------
------------ -------------
-------
------
--------- ----------
-------
-------我们可以利用 Puppeteer 在 Jest 中创建一个快照测试：
----- --------- - ---------------------
---------------- -- -- -
---------- ----- -- -- -
----- ------- - ----- -------------------
----- ---- - ----- ------------------
----- ------------------- - --------- - --------------
----- ---------- - ----- ------------------
------------------------------------------
----- ----------------
---
---这段代码使用 toMatchImageSnapshot() 方法将屏幕截图与测试文件夹中的快照进行比较。如果它们不同，则测试将失败，并将生成一个新的快照。
结论
在 Jest 中使用 Puppeteer 进行 E2E 测试是一项非常强大的功能。通过使用 Puppeteer 与 Jest 结合，我们可以轻松地创建测试并检查 Web 应用程序是否按预期工作。希望本文提供的示例代码对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67302c85eedcc8a97c9141e9