介绍
现代 web 应用程序通常由前后端分离的体系结构组成，前端通过向后端发送 HTTP 请求，从而与后端进行交互。在测试前端应用程序时，我们需要确保发送到后端的请求被正确处理并且正确的响应已返回。Cypress 是一个流行的前端测试工具，它可以对 web 应用程序进行自动化测试。在本文中，我们将探讨如何在 Cypress 中检查请求是否被正确处理。
检查请求是否被正确处理
Cypress 提供了一种称为 cy.intercept() 的功能来拦截并处理在测试期间发送的请求。我们可以使用它来验证请求是否被正确处理。我们可以在 cy.intercept() 中提供一个回调函数，该函数将会接受一个请求参数，我们可以在该参数中检查请求是否符合特定的条件，如 URL、请求正文等等。
下面是一个示例代码，用于验证一个 POST 请求是否被正确处理：
-- -------------------- ---- -------
-------------------- ------------- ----- -- -
--------------------------------------------
------------------------------------------------
-----------
------- ----
----- -
------ -----------
-
---
---
-------------------
----------------------------------------
---------------------------------------------------
------------------------------------ --------------在示例代码中，我们对 POST /api/login 请求进行了拦截，并验证了请求正文是否包含正确的用户名和密码。如果请求通过验证，我们将回复一个自定义响应 200，并带有一个 JWT Token。
在测试应用程序时，我们使用 cy.visit() 访问应用程序的登录页面，并模拟用户输入用户名和密码。当用户按下 ENTER 键时，我们使用 cy.location() 来确保应用程序重定向到正确的路径。
检查未处理的请求
有时，我们不希望应用程序处理我们在测试期间发送的某些请求。这通常是因为我们想在测试中强制出现某种意外情况。当我们拦截请求并未回复时，Cypress 会一直等待请求完成，然后它将会超时失败。我们可以使用 cy.wait() 来等待未被处理的请求，它将会阻塞测试，直到请求完成或超时。
下面是一个示例代码，用于验证一个未被处理的 POST 请求的超时行为：
cy.intercept('POST', '/api/timeout').as('timeoutRequest');
cy.visit('/dashboard');
cy.wait('@timeoutRequest');
cy.contains('500 Internal Server Error').should('be.visible');在示例代码中，我们对 POST /api/timeout 请求进行了拦截，并使用 cy.wait() 等待请求超时失败。我们使用了 cy.contains() 来确保应用程序显示出了 500 Internal Server Error 错误消息。
检查多个请求
有时，我们需要测试一个依赖于多个请求的页面。Cypress 允许我们链式调用多个 cy.intercept() 方法来拦截多个请求，以便我们可以在测试期间检查它们是否被正确处理。
下面是一个示例代码，用于验证一个需要多个请求才能加载的页面：
cy.intercept('GET', '/api/users').as('usersRequest');
cy.intercept('GET', '/api/posts').as('postsRequest');
cy.visit('/dashboard');
cy.wait(['@usersRequest', '@postsRequest']);
cy.contains('Welcome, John Doe!').should('be.visible');在示例代码中，我们对 GET /api/users 和 GET /api/posts 请求进行了拦截，并使用 cy.wait() 等待这两个请求完成。在等待期间，我们可以进行其他操作，例如在应用程序上查找特定的文本。
结论
使用 Cypress，我们可以轻松地测试我们的前端应用程序，确保发送到后端的请求被正确处理。使用 cy.intercept()，我们可以拦截并处理应用程序发送的请求。我们可以使用 cy.location() 来验证应用程序是否重定向。我们可以使用 cy.wait() 等待请求完成或超时失败，并通过 cy.contains() 来查找特定的文本。Cypress 提供了丰富的 API 和强大的功能，可帮助我们编写完整和可靠的测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b14d4d91dce0dc8873329