Cypress 是一个流行的前端测试工具，可以用于自动化测试和端到端测试。在进行测试时，经常需要模拟 HTTP 请求并检查响应。本文将介绍如何在 Cypress 中处理 HTTP 请求，包括如何发送请求和如何拦截响应。
发送 HTTP 请求
Cypress 提供了 cy.request() 方法来发送 HTTP 请求。该方法可以接受一个 URL 或一个包含 URL 和其他选项的对象。
发送 GET 请求
以下示例演示如何使用 cy.request() 方法发送 GET 请求：
cy.request({
method: 'GET',
url: 'https://jsonplaceholder.typicode.com/posts/1'
}).then((response) => {
expect(response.status).to.eq(200);
expect(response.body.userId).to.eq(1);
})该示例发送一个 GET 请求到 https://jsonplaceholder.typicode.com/posts/1，然后使用 then() 方法检查响应是否包含预期的属性。其中 response.status 指响应的状态码，response.body 指响应主体。
发送 POST 请求
以下示例演示如何使用 cy.request() 方法发送 POST 请求：
-- -------------------- ---- -------
------------
------- -------
---- ---------------------------------------------
----- -
------ ------
----- ------
------- -
-
------------------ -- -
-----------------------------------
-----------------------------------------
--该示例发送一个 POST 请求到 https://jsonplaceholder.typicode.com/posts，并将一个对象作为请求主体发送。然后使用 then() 方法检查响应是否包含预期的属性。其中 response.status 指响应的状态码，response.body 指响应主体。
拦截 HTTP 响应
Cypress 提供了 cy.route() 方法来拦截 HTTP 请求并模拟响应。该方法可以接受一个 URL 或一个包含 URL 和其他选项的对象。
拦截 GET 请求
以下示例演示如何使用 cy.route() 方法拦截 GET 请求：
-- -------------------- ---- ------- ------------ --------------- ----------------------------------------------- - ------- - ----------------- --------------------------------------------------------- ------------------------------ -- - ------------------------------------------ --
该示例在 cy.server() 方法中启用了一个虚拟的服务器，然后使用 cy.route() 方法拦截 GET 请求到 https://jsonplaceholder.typicode.com/posts/1，并模拟响应。然后使用 as() 方法为该请求起一个别名。最后使用 cy.visit() 方法访问该 URL，并使用 cy.wait() 方法等待拦截的请求完成。完成后，使用 then() 方法检查响应是否包含预期的属性。其中 xhr.response.body 指模拟的响应主体。
拦截 POST 请求
以下示例演示如何使用 cy.route() 方法拦截 POST 请求：
-- -------------------- ---- -------
------------
---------------- --------------------------------------------- -
--- ----
------ ------
----- ------
------- -
------------------
------------------------------------------------------ -
------- -------
----- -
------ ------
----- ------
------- -
-
--
------------------------------- -- -
----------------------------------------
---------------------------------------------
--该示例在 cy.server() 方法中启用了一个虚拟的服务器，然后使用 cy.route() 方法拦截 POST 请求到 https://jsonplaceholder.typicode.com/posts，并模拟响应。然后使用 as() 方法为该请求起一个别名。最后使用 cy.visit() 方法访问该 URL，同时将一个对象作为请求主体发送。完成后，使用 cy.wait() 方法等待拦截的请求完成。完成后，使用 then() 方法检查响应是否包含预期的属性。其中 xhr.response.body 指模拟的响应主体。
结论
在 Cypress 中，我们可以使用 cy.request() 方法发送 HTTP 请求，并使用 cy.route() 方法拦截 HTTP 请求并模拟响应。这些方法可以帮助我们写出更可靠的测试，并验证我们的应用程序是否正确地处理了网络请求。同时，我们还可以使用 then() 方法检查响应是否包含预期的属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775180a6d66e0f9aaf3b3d2