Cypress 是一个流行的前端自动化测试工具，它提供了一种简单而强大的方式来测试 Web 应用程序。在测试过程中，我们可能需要检查应用程序与后端的网络请求是否正确。本文将介绍如何在 Cypress 测试中检查网络请求。
检查网络请求的类型
在 Cypress 中，我们可以通过 cy.route() 命令来拦截和监控网络请求。该命令允许我们定义一个路由规则，以便捕获特定类型的请求。例如，以下代码将拦截所有以 /api/ 开头的 GET 请求：
----------------------------
我们可以使用 cy.wait('@api') 命令等待该请求完成。然后，我们可以使用 cy.get('@api').its('method') 命令来获取请求的类型。例如，以下代码检查请求是否为 GET 请求：
------------------------ -- - ------------------------------- --
我们还可以使用 cy.get('@api').its('request.url') 命令来获取请求的 URL。例如，以下代码检查请求是否为 /api/users：
------------------------ -- - ------------------------------------------- --
检查网络请求的响应
在 Cypress 中，我们可以使用 cy.route() 命令来拦截和监控网络请求的响应。该命令允许我们定义一个路由规则，以便捕获特定类型的响应。例如，以下代码将拦截所有以 /api/ 开头的 GET 请求，并检查响应是否为 JSON 格式：
----------
------- ------
---- ---------
----------- ---------- -- -
-----------------------------------------------------------------------
-
------------我们可以使用 cy.wait('@api') 命令等待该请求完成。然后，我们可以使用 cy.get('@api').its('response.body') 命令来获取响应的主体。例如，以下代码检查响应是否包含 id 和 name 字段：
------------------------ -- - ------------------------------------------------ -------------------------------------------------- --
检查网络请求的状态码
在 Cypress 中，我们可以使用 cy.route() 命令来拦截和监控网络请求的状态码。该命令允许我们定义一个路由规则，以便捕获特定类型的状态码。例如，以下代码将拦截所有以 /api/ 开头的 GET 请求，并检查状态码是否为 200：
---------- ------- ------ ---- --------- ------- --- ------------
我们可以使用 cy.wait('@api') 命令等待该请求完成。然后，我们可以使用 cy.get('@api').its('status') 命令来获取状态码。例如，以下代码检查状态码是否为 200：
------------------------ -- - ----------------------------- --
总结
在 Cypress 测试中检查网络请求是非常重要的。我们可以使用 cy.route() 命令来拦截和监控网络请求的类型、响应和状态码。在实际测试中，我们可以结合这些命令来编写更加严谨和完整的测试用例。
示例代码
以下是一个完整的示例代码，用于检查 /api/users 的 GET 请求是否返回正确的数据：
-------------- ------- ---------- -- -- -
---------- ------ ------- ------ -- -- -
-----------
----------
------- ------
---- -------------
--------- -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- -
-
------------
-------------
---------------
----------------------- -- -
-------------------------------
-------------------------------------------
------------------------------------------------------------------
-----------------------------
---------------------------------------------
--------------------------------------------------- --
----------------------------------------------------- --------
--------------------------------------------------- --
----------------------------------------------------- ------
--------------------------------------------------- --
----------------------------------------------------- ----------
--
--
--来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c6061cadd4f0e0ff08161a