在今天的前端开发中，Web 应用程序已经成为了必要的门户。保证这些应用程序的正确性和可靠性对任何组织都是至关重要的。在这样一个情况下，端到端 (E2E) 测试已经成为了 Web 应用程序测试中的常用工具。其中很有前途的一个工具是 Cypress。
Cypress 是一个面向现代 Web 应用程序的 E2E 测试解决方案，让您更快、更轻松地编写这些测试。值得注意的是，Cypress 已经成为前端开发人员中很受欢迎的测试框架之一，因为它无需将应用程序部署到真实网络服务器上即可进行测试。在这篇文章中，我们将讨论 Cypress E2E 测试中的如何模拟用户使用场景。
前置知识
在本文中，我们假设您已经具有一定的前端开发经验，并且您已经熟悉使用 Cypress 进行基本的 E2E 测试。如果您还不熟悉 Cypress，请先阅读 Cypress 官网。
模拟用户使用场景
用户使用场景模拟（也称为工作流）是模拟用户在 Web 应用程序中执行的任务序列。我们可以使用这些步骤来测试应用是否与真实场景相匹配，以及它是否在这些场景下工作得很好。下面是几个我们可以使用的技术来模拟用户使用场景。
1. 使用 cy.visit() 访问其他页面
在某些情况下，我们需要确保我们的应用程序可以正确地在不同页面之间进行导航。我们可以使用 cy.visit() 命令来加载其他页面并测试应用程序是否按预期工作。
-- -------------------- ---- -------
---------------------- -- -- -
---------- -- ---- ---- ---- -- ------- ------ -- -- -
-------------
-- ------------------------------
----------------------------------------
-------------------------- -----------
-----------------------------------------------------
--
--上述代码中，我们使用 cy.visit() 命令来访问我们的首页。然后，我们会点击我们的应用程序上的 ‘联系’ 链接来访问我们的联系页面。最后，我们使用 cy.url() 命令来确保 URL 中包含 ‘/contact’，以及 cy.get() 命令来找到页面上的联系表单。
2. 使用 cy.get() 查找元素
Cypress 中最常用的命令之一就是 cy.get()。这个命令允许我们根据特定的 CSS 选择器查找元素。在模拟用户使用场景时，我们可以使用 cy.get() 命令找到所需的 HTML 元素并模拟用户的交互。
-- -------------------- ---- -------
------------------ -- -- -
---------- ------- --- ------ ------- --- - ----- ------- -- -- -
-------------
------------------------------------------------
-----------------------------------------
-------------------------------------------------------
------------------------------------------------------
--
--上述代码中，我们使用 cy.visit() 命令访问我们的首页，并使用 cy.get() 命令查找搜索输入框和搜索按钮。然后，我们使用 type() 命令输入一个查询字符串，并使用 click() 命令搜索。最后，我们使用 cy.get() 命令找到搜索结果，并使用 contains() 命令确保我们的查询结果包含 “Cypress”。
3. 使用 cy.intercept() 捕捉 AJAX 请求
AJAX 请求是一种广泛用于 Web 应用程序中的技术，其中 JavaScript 来自 Web 应用程序而不是传统的页面加载。要测试 Web 应用程序的完整性和性能，我们需要将 AJAX 请求视为重要的组成部分。Cypress 使得捕捉 AJAX 请求变得很容易，可以使用 cy.intercept() 命令来捕获请求并模拟响应。
-- -------------------- ---- -------
---------------- -- -- -
---------- --------- --- ------ -- ---- --------- -- -- -
-------------------------- ----- -- -
--------------- -- -
-------------- - ------------------------- -- -
--------- - ----- ----
------ ----
--
--
--
-------------
-------------------------------------------- -----
--
--上述代码中，我们使用 cy.intercept() 命令来捕获我们应用程序中的 /api/users AJAX 调用。然后，我们使用 reply() 命令修改返回的 JSON 对象，并将每个用户的名称设置为 “John Doe”。最后，我们使用 cy.get() 命令找到我们的用户列表，以确保名称已成功更改。
总结
在本文中，我们探讨了 Cypress E2E 测试中的如何模拟用户的使用场景。我们了解了几个常见的技术，包括 cy.visit()、cy.get() 和 cy.intercept()，它们可以帮助我们指导 Cypress 进行更高效的测试。通过这些技术的运用，我们可以组织一个更加真实、可靠的测试，帮助我们更好地保证 Web 应用程序的正确性和可靠性。希望这篇文章对您有所启发，并有助于您编写更好的 Cypress 测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66458fa6d3423812e438c7c5