前言
Web 应用程序测试是前端开发不可或缺的一部分，它可以确保我们的应用程序在发布前是没有 bug 的。在测试中，自动化测试是非常关键的一部分，它能够提高测试的效率和准确性。本文将介绍如何使用 Mocha 和 Puppeteer 进行自动化测试，让你的测试更加高效、简洁。
简介
Mocha 是一个 JavaScript 测试框架，它支持异步测试、具有简单的 API 和强大的报告机制。Puppeteer 是 Google 开发的一个 Node.js 库，提供了一个高层 API 来控制无头版本的 Chrome 浏览器，使得我们能够轻易地模拟用户操作，并测试 Web 应用程序的各种方面。
下面，我们将详细介绍如何使用 Mocha 和 Puppeteer 进行自动化测试，并给予你一些实用的指导意义。
准备工作
在开始使用 Mocha 和 Puppeteer 进行测试之前，我们需要确保有 Node.js 的环境，并安装相关的依赖。
npm init -y npm i puppeteer mocha chai --save-dev
基础知识
在我们开始编写测试用例之前，我们需要先了解一些关键的概念。
- Test Suite（测试集）：一个测试套件由测试用例组成，它描述了一组测试用例的集合。
- Test Case（测试用例）：测试用例是一个单独的测试单元，他会对应一个特定场景下应用程序的某个方面的测试。测试用例应该是独立的，没有任何依赖。
- Assertion（断言）：断言是描述预期结果的一种方式。测试框架会比较预期结果和实际结果，并在它们不相同时生成一个错误消息。
现在，我们已经准备好开始编写测试用例了。
编写测试用例
考虑到大多数应用程序都会有以下编程语言：HTML、CSS 和 JavaScript，所以我们将以一个简单的电商网站作为示例。假设我们要测试的页面 URL 是 https://example.com/products，它是一个包含多个产品信息的列表页面。
基础测试
首先，我们将编写一个最基础的测试用例，我们将测试页面的标题是否包含 "Products"。
-- -------------------- ---- -------
----- --------- - ---------------------
----- ------ - -----------------------
-------------- --- -------- ------ -- -- -
--- --------
--- -----
------------ -- -- -
------- - ----- -------------------
---- - ----- ------------------
----- ------------------------------------------
---
---------- ---- --- ------- ------- ----- -- -- -
----- ----- - ----- -------------
--------------------- ------------
---
----------- -- -- -
----- ----------------
---
---在上述代码中，我们使用 Mocha 的 describe 函数来定义我们的测试套件，也就是 Test the products page。我们使用 before 函数来指定在每个测试用例之前运行的代码，也就是我们打开浏览器，创建一个新页面并导航到我们要测试的 URL。我们使用 Mocha 的 it 函数来定义测试用例，也就是 should have the correct title，我们断言页面标题是否包含字符串 Products。最后，在每个测试用例之后，我们使用 after 函数来关闭浏览器。
在搜索框输入关键词并搜索
现在，我们将编写一个测试用例来测试是否能够通过在搜索框中输入关键词然后搜索出相关的产品。
-- -------------------- ---- -------
---------- ------- ------ ------- ----- -- --- ------ --------- ----- -- -- -
----- ------------- - ---------
----- -------------------------- ---------------
----- -----------------------------
----- ---------------------------------
----- -------------- - ----- --------------------
----------------------------------
--- ------ ------- -- --------------- -
----- ----------- - ----- ------------------------------ ---- -- ----------------------------
--------------------------- ---------------
-
---在上述代码中，我们在搜索框输入关键词 iphone，然后单击搜索按钮。之后，我们使用 waitForSelector 函数等待包含产品信息的 .product 元素的出现，应该在五秒内出现。然后，我们检查是否至少存在一个产品，并使用 for ... of 循环在每个产品上进行迭代，并在每个产品上执行测试。我们将使用 assert.include 来确保在产品名称中含有关键字 iphone。
进入产品详情页面和返回产品列表页面
现在，我们来编写一个测试用例，测试是否能够从产品列表页面进入产品详情页面，然后从产品详情页面返回产品列表页面。
-- -------------------- ---- ------- ---------- -------- -- --- ------- ------ ---- --- ------ -- --- ------- ---- ------ ----- -- -- - ----- ---------------- - --------------------------------- ----- ---------------------------- ----- ---------------------------------------- ----- -------------- ----- --------------------------------- ----- -------------- - ----- -------------------- ---------------------------------- ---
在上述代码中，我们使用 goto 函数来导航到产品详情页面，并使用 waitForSelector 函数等待包含产品详细信息的 .product-detail 元素的出现，应该在五秒内出现。之后，我们使用 goBack 函数返回到产品列表页面，并使用 waitForSelector 函数等待包含产品信息的 .product 元素的出现，应该在五秒内出现。然后，我们自检，确保至少存在一个产品。
删除某个产品
最后，我们将编写一个测试用例，测试是否能够顺利地通过点击“删除”按钮将某个特定产品从产品列表页面中删除。
-- -------------------- ---- ------- ---------- ------ - ------- -------------- ----- -- -- - ----- --------------- - ------------- ----- ------------------- - ------------------- ---------------- ----- -------------------------------------- ----- ---------------------------- ----- ------------------------------------------ ----- -------------------------------- ----- ------------------------- - ----- -------------------- ------------------------------------------------ --- ---
在上述代码中，我们首先使用 waitForSelector 函数等待特定产品的 .product-3 元素的出现，应该在五秒内出现。接下来，我们使用 hover 函数将鼠标悬停在该产品上，进而在该产品内激活元素 .delete-button，并单击它。最后，我们检查产品数量是否减少。
总结
使用 Mocha 和 Puppeteer，我们可以轻松地编写自动化测试，并保证我们在发布前发现和修复了可能会导致因存在性能问题、安全漏洞或用户体验差的问题。我们介绍了使用 Mocha 和 Puppeteer 进行自动化测试的入门知识和测试用例的范例，包括核心概念，如测试套件、测试用例和断言。我们也分享了一些常见的自动化测试技巧，其中包括页面跳转、操作 UI 元素、执行断言等。
在未来的测试中，特别是在越来越复杂的 Web 应用程序中，你需要不断地拓展你的测试用例，并按照上述方法去实现它们。通过这些方式，你可以确保在开发过程中不断迭代，仔细测试，提高应用程序质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c089db9e06631ab9cdbb95