Cypress 是一种现代化的前端端到端测试框架，它可以帮助你对你的应用程序进行自动化测试。它的优点在于易于使用和理解，它提供了相当完整的功能，可以让测试人员轻松地编写测试用例和通过测试。
在本文中，我们将介绍如何使用 Cypress 在前端应用程序上实现翻页机制，这对于网站、电商和新闻等需要内容分页的应用程序来说是非常重要的。
什么是翻页机制
翻页机制是指将长篇内容分为若干页，以便读者更好地阅读。一般而言，这种机制经常应用于网站、电商和新闻。在网站和电商中，翻页机制非常常见，因为对于大量内容的应用程序，从性能方面出发，将所有内容装载到一个页面中可能会导致页面加载较慢，影响用户体验。而新闻平台中，翻页机制往往是因为一次性将所有新闻内容都放在一个页面中不太合适，而精度分离和分页规则可以大大减少页面的加载时间。
为什么要进行翻页机制的测试
翻页机制的测试非常重要，因为一旦翻页出现问题，将会让用户使用非常痛苦。假如翻页机制的分页规则不正确，可能会导致用户无法读到所有的内容，尽管内容存储在后端；反之如果规则过于宽泛，那么将会导致其他响应网络资源的应用程序受到波及，造成资源浪费问题，对于新闻，内容过于宽泛会让用户阅读不可信的信息，增加安全风险。
因此，应该测试是否在正确时刻显示了翻页按钮、正确地将新内容添加到页面上、正确地输入 URL 参数等等。
如何在 Cypress 中实现翻页机制
在 Cypress 中实现翻页机制的关键在于制定翻页规则，以将最初批量的内容分割成多个页面并添加分页显示。通常的规则是：
- 每页显示固定的元素数量
- 可以使用数字或左右箭头进行分页
- 将每个分页的函数分开测试
- 可以设置默认的第一页
我们将使用这些规则来构建一个简单的翻页示例，以帮助你了解如何使用 Cypress 进行测试。
1. 创建一个可以翻页的静态网页
我们将创建一个基本的 HTML 和 CSS 文件，模拟一个需要翻页的网站，它将在用例开始之前被加载
-- -------------------- ---- ------- --------- ----- ------ -------- -------------- ------------ ----- ---------------- ----------------- --------- ------ ----------- --------- ---- ----------------------- ---- --------------------- --------------------- --------------------- ------ ------- ------------------------- ------- -------展开代码
2. 在 Cypress 中编写测试用例
接下来，我们将使用 Cypress 编写测试用例，以验证我们的翻页机制是否正常工作。我们将编写三个测试用例：
- 翻至下一页后应该显示不同的内容
- 翻至上一页后应该显示不同的内容
- 第一页不应该显示“Prev”按钮
-- -------------------- ---- ------- ---------------- -- -- - ------------- -- - ----------------------- --- ------------------ -- -- - ----- ------------ - --------------------------- ------------------------------------------ ----- ------------- - --------------------------- ------------------------------------------------- --- ------------------ -- -- - ------------------------------------------ ----- ------------- - --------------------------- ------------------------------------------ ----- ------------ - --------------------------- ------------------------------------------------- --- ---------------------- -- -- - -------------------------------------------------------- --- ---展开代码
上述代码实现了三个测试：
第一，点击“下一页”按钮后，“内容”区域应显示不同的内容。我们将在点击一次按钮之前获取“内容”区域中的 HTML，并在之后点击按钮后再次获取 HTML。最后，我们将确定这两个 HTML 片段是否相同。
第二，在前往下一页之前，我们将获取当前“内容”区域中的 HTML，然后点击“下一页”按钮。然后，我们将再次获取“内容”区域中的 HT 然后点击“上一页”按钮。最后，我们将确定这两个 HTML 片段是否相同。
第三个测试套件检查在进入第 2 页之前，是否启用了“Prev”按钮。如果相对于页面未存在，则应为 disables。 如果我们现在单击“下一页”按钮，只有在显示第二页时我们才会看到此按钮启用。
3. 实现翻页机制
我们还需要实现翻页机制并负责更新内容。因此，我们将使用 JavaScript 创建标准翻页逻辑并动态更新 DOM。
-- -------------------- ---- ------- --- ---- - -- --- ------- - -- --- ------- - -- --- ------------ - - ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ------------------ ----------------- - -------- ------------------ - -- ----- -- -- - --------------------------------------------- ------ - ---- - --------------------------------------------- ------- - -- ----- -- -------- - --------------------------------------------- ------ - ---- - --------------------------------------------- ------- - - -------- --------------- - ----- ---------- - ----- - -- - -------- ----- -------- - ---------- - -------- ----- ------------------- - ------------------------------ ---------- -------------------------------------------------- - ------------------------------------- -- - -- ----- - -- - ------- ------------------- ---------------- - --- ------------------------------------- -- - -- ----- - -------- - ------- ------------------- ---------------- - --- ------------------- ----------------展开代码
上述 JavaScript 代码使用简单的变量、函数和 jQuery 操作符来实现翻页逻辑。具体而言，我们将 mockContents 数组分为多个页面，每个页面包含三个元素。然后，我们将使用 jQuery 直接访问 DOM 组件，并用 updatePagination 和 updateContent 函数更新分页控件。
updatePagination 函数根据当前页面确定“Prev”和“Next”按钮是否启用。
updateContent 函数使用简单计算来确定应该在当前页面上显示哪些内容。
最后，分别为“Prev”和“Next”按钮绑定单击事件。如果当前页面是第一页，我们禁用“Prev”按钮；如果当前页面是最后一页，我们禁用“Next”按钮。如果正在浏览最后一页之前的页面，则“Next”按钮应该启用。
结论
在 Cypress 中测试翻页机制很容易。它需要确定分页规则和输入页面参数的正确分页内容。在构建真实应用程序时，确保你在测试中实施如下四点：
- 每页应该显示固定的元素数量。
- 使用数字或左右箭头进行分页。
- 将每个分页函数分开测试。
- 可以设置默认的第一页。
当你正确地测试翻页机制时，这将增强应用程序的可用性，减少用户体验问题，增强应用程序的可靠性，提高整个应用程序的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6772302f6d66e0f9aad568d5
