介绍
在现代 Web 应用程序开发中，端到端 (E2E) 测试已经成为不可或缺的一部分。E2E 测试是一种测试方式，用于测试整个应用程序的流程，从用户界面到后端系统的集成，它可以帮助开发人员捕捉到一些常见的 bug 和异常，例如：交互问题，后端数据异常，以及性能问题等。
在 E2E 测试中，尤其是在 Web 应用程序中，Jest 和 Puppeteer 是目前最受欢迎的工具，Jest 是 Facebook 开发的 JavaScript 测试框架，而 Puppeteer 是一个由 Google 开发的 Node.js 库，用于模拟现代浏览器的行为。
在本文，我们将探讨 Jest 和 Puppeteer 如何一起工作，并演示如何使用它们实施 E2E 测试。
环境设置
在开始我们的 E2E 测试之前，我们需要完成一些准备工作。首先，你需要安装 Node.js 运行环境，其次，我们需要安装 Jest 和 Puppeteer，方法如下：
# 安装 Jest npm install --save-dev jest # 安装 Puppeteer npm install --save-dev puppeteer
编写测试用例
在此阶段，我们将开始编写我们的第一个测试用例。该测试用例将打开浏览器，导航到 Google.com，输入关键字 "Jest"，然后点击搜索按钮，最后验证搜索结果是否正确。
-- -------------------- ---- -------
-- -- ---------
----- --------- - ---------------------
-- ---------
-------- ------ --------- ----- -- -- -
-- -----------
----- ------- - ----- -------------------
-- ----------
----- ---- - ----- ------------------
-- --- ----------
----- -------------------------------------
-- ----- ------
----- ---------------------------- --------
-- ------
----- ---------------------------------
-- --------
----- --------------------------------
-- ------
----- ------------ - ----- ---------------- -- -
------ ---------------------------------------------------- -- -
------ -
------ -----------------------------------
----- ---------------------------
----- ---------------------------------------
-
---
---
-- ----------
------------------------------------------------
----------------------------------------------------
-------------------------------------------- -- - ---------- ---------- ------- ------------
-- -------
----- ----------------
-- -------在上面的代码中，我们创建了一个简单的测试用例，并使用了 Jest 的 test() 函数来定义它。我们使用 Puppeteer 创建了一个新的浏览器实例，并在其上创建了一个新的页面实例，然后导航到 Google.com。
接下来，我们在关键字输入框内输入 "Jest"，然后点击搜索按钮。我们使用了 waitForSelector() 函数来等待网页上的搜索结果出现，此函数将等待一个内容为 #search 的元素出现，如果在 15 秒内没有出现，则测试失败。
在成功获取搜索结果后，我们使用了 evaluate() 函数来提取有用的信息。该函数将在网页上下文中运行，然后返回我们所需的数据。在这个例子中，我们读取并返回搜索结果的标题，链接和文本。
最后，我们使用 expect() 函数来验证我们的搜索结果是否正确。如果我们的搜索结果满足我们的预期，就表示该测试用例已经成功了，我们将关闭浏览器实例。
总结
Puppeteer 和 Jest 是两个非常优秀的工具，它们可以一起帮助开发人员快速捕获到常见的 bug 和异常。在本文中，我们演示了如何使用 Puppeteer 和 Jest 实现一个简单的 E2E 测试案例。接下来，你可以尝试很多不同的用例，例如测试登录、注册、购物车流程等。需要注意的是，在编写测试用例时，我们需要确认测试结果是否满足我们的预期，这样才能保证测试的高质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494eedc48841e989423ae0e