前置知识
在学习如何使用 mocha-puppeteer 前，我们需要掌握一些前置知识：
npmmochapuppeteer
简介
mocha-puppeteer 是一款用于在 puppeteer 中运行 mocha 测试的 npm 包。它可以帮助我们方便地在 puppeteer 环境下进行 UI 自动化测试。
安装
要使用 mocha-puppeteer，我们需要在项目中安装它：
--- ------- --------------- ----------
接下来我们需要在 package.json 文件中添加一个脚本：
-
---------- -
------- ---------------- --------------
-
-这个脚本会告诉 npm 从 tests/ 目录中寻找所有以 .js 结尾的测试文件，并使用 mocha-puppeteer 运行它们。
使用
在编写测试文件之前，我们需要先启动一个 puppeteer 实例。我们可以创建一个 before 钩子函数来完成这个任务：
----- --------- - ---------------------
------------ ---- ------- ---------- -
--- --------
--- -----
------------ ---------- -
------- - ----- -------------------
---- - ----- ------------------
---
----------- ---------- -
----- ----------------
---
---------- ---- --- ------- ---- ------- ----- ---------- -
----- ------------------------------------
----- ----- - ----- -------------
---------------------------------
---
---在这个例子中，我们创建了一个名为 My test suite 的测试套件，并在其中定义了一个名为 should have the correct page title 的测试用例。我们使用 puppeteer.launch 启动了一个 puppeteer 实例，并在 before 钩子函数中使用 browser.newPage 创建了一个新的空白页面。在测试用例中，我们使用 page.goto 导航到 https://www.google.com，并使用 page.title 获取了页面的标题。最后，我们使用 expect 断言语句检查标题是否为 Google。
示例
接下来，我们来看一个更复杂的示例。假设我们要测试一个登录页面，并检查一些元素是否正确显示。假设我们的页面包括一个用户名输入框、一个密码输入框和一个登录按钮。当用户点击登录按钮时，系统应该向服务器发送一个 POST 请求，以验证用户名和密码是否正确。如果验证成功，用户将被重定向到另一个页面。
下面是我们的测试用例：
----- --------- - ---------------------
--------------- ------ ---------- -
--- --------
--- -----
------------ ---------- -
------- - ----- -------------------
---- - ----- ------------------
---
----------- ---------- -
----- ----------------
---
---------- ------- --- ----- ------ ----- ---------- -
----- -----------------------------------------
----- ----- - ----- -------------
----- ----------------- - ----- --------------------
----- ----------------- - ----- --------------------
----- ----------- - ----- -----------------------
--------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------
---
---------- --- -- -------------- ----- ---------- -
----- -----------------------------------------
----- ---------------------- ------------
----- ---------------------- ----------------
----- ---------------------------
----- -------------------------
----- ----- - ----- -------------
-------------------------------
---
---在这个例子中，我们首先使用 page.goto 导航到登录页面。然后，我们使用 page.$ 方法，通过选择器获取页面中的元素。实际上我们可以使用 page.$$ 方法，通过选择器获取页面中匹配的一组元素。对于每个元素，我们使用 expect 断言语句检查它是否正确显示。
在第二个测试用例中，我们使用 page.type 方法在用户名和密码输入框中输入文本，并使用 page.click 方法点击登录按钮。我们使用 page.waitForNavigation 方法等待页面重定向到我们登录成功的页面。最后，我们检查页面标题是否正确。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/193149