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