前置知识
在学习如何使用 mocha-puppeteer 前，我们需要掌握一些前置知识：
npmmochapuppeteer
简介
mocha-puppeteer 是一款用于在 puppeteer 中运行 mocha 测试的 npm 包。它可以帮助我们方便地在 puppeteer 环境下进行 UI 自动化测试。
安装
要使用 mocha-puppeteer，我们需要在项目中安装它：
npm install mocha-puppeteer --save-dev
接下来我们需要在 package.json 文件中添加一个脚本：
{ "scripts": { "test": "mocha-puppeteer tests/**/*.js" } }
这个脚本会告诉 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
