Cypress 是一个功能强大的前端测试框架，它能够帮助我们轻松地编写和运行 E2E 测试和集成测试。而在进行这些测试时，有一个非常重要的需求就是要验证网络请求是否正确发送和返回。本文将介绍如何在 Cypress 中捕获网络请求并验证它们。
安装 Cypress
在开始之前，我们需要安装 Cypress。可以通过 npm 进行安装：
npm install cypress --save-dev
安装完成后，我们就可以使用 Cypress 了。通过运行以下命令来启动 Cypress：
npx cypress open
这将打开 Cypress 的 GUI 界面，我们可以在这里创建和运行测试。
捕获网络请求
在 Cypress 中使用 cy.route() 方法来捕获网络请求，该方法可以用来模拟真实的请求并返回指定的数据。下面是一个简单的示例：
-- -------------------- ---- -------
------------------ -- -- -
------ --- ---- -- -- -
-- -- --- --
--------------- ----------------------------
-- ----
------------------
-- ------
--------------------
-- ----
-------------------
------------------------ --------- ----
---------------------
---------------------- --
--
--在上面的代码中，我们使用 cy.route() 方法来捕获 GET 请求，并将其命名为 getUsers。然后，我们访问一个包含该请求的页面，等待请求完成，然后使用 cy.get() 方法来访问捕获的请求。最后，我们验证请求的状态码以及返回值的长度。
模拟网络延迟
有时候，我们需要在测试中模拟网络延迟，以确保页面的正确行为。Cypress 可以使用 cy.route() 方法来模拟网络延迟，下面是一个示例：
-- -------------------- ---- -------
------------------ -- -- -
--------- --- ---- -- -- -
-- -- --- ----------
----------
------- ------
---- -------------
--------- ---------------------
------ ----
-----------------
-- ----
------------------
-- ------
--------------------
-- ----
-------------------
------------------------ --------- ----
---------------------
---------------------- --
--
--在上面的代码中，我们通过添加 delay 属性来模拟一个 1 秒钟的网络延迟。
修改响应结果
有时候，我们还希望能够修改网络请求的响应结果，并使测试更加全面。Cypress 可以使用 cy.route() 方法来模拟修改响应结果，下面是一个示例：
-- -------------------- ---- -------
------------------ -- -- -
--------- --- ---- -- -- -
-- -- --- ----------
----------
------- ------
---- -------------
--------- --------------------
-----------------
-- ----
------------------
-- ------
--------------------
-- ------
-------------------
------------- -- -
------------------------- - ------
--
-- ----
-------------------
----------------------------
---------------- -------
--
--在上面的代码中，我们通过使用 cy.get() 方法来访问捕获的请求，并修改其响应结果。然后我们再次验证请求，确保它已被修改。
结论
在本文中，我们介绍了如何在 Cypress 中捕获网络请求并验证它们。我们还介绍了如何模拟网络延迟和修改响应结果。这些技巧将有助于我们编写更加全面和准确的测试。我们希望这些内容对你有所帮助，并能提高你在前端测试中的技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f50f39c5c563ced56b624a