Cypress 是一个非常流行的前端自动化测试框架，它不仅可以帮助我们完成 UI 自动化测试，还可以对 API 进行测试。在进行 API 测试时，我们经常需要对请求进行拦截和修改，本文将详细介绍在 Cypress 中如何实现这个功能。
为什么需要对 API 请求进行拦截与修改
在进行 API 测试时，我们通常需要模拟一些特定的场景，比如：
- 模拟服务器返回错误的响应，测试前端的错误处理机制是否正常；
- 模拟服务器返回超时的响应，测试前端的超时处理机制是否正常；
- 模拟服务器返回不同的数据，测试前端对不同数据的处理是否正常；
- 等等。
为了实现这些场景，我们需要对 API 请求进行拦截和修改。
Cypress 中如何拦截 API 请求
Cypress 提供了 cy.route() 方法来拦截 API 请求。这个方法接受一个正则表达式作为参数，用来匹配请求的 URL。当请求的 URL 匹配成功时，cy.route() 方法会拦截这个请求，并返回一个对象，我们可以通过这个对象来控制响应的数据。
下面是一个简单的示例：
cy.server() // 启用 Cypress 的服务器模式
cy.route('/api/users', { name: 'Alice' }).as('getUsers') // 拦截 /api/users 请求，并返回 { name: 'Alice' } 数据
cy.visit('/users') // 访问 /users 页面
cy.wait('@getUsers') // 等待 /api/users 请求完成
cy.get('.user-name').should('have.text', 'Alice') // 确认页面上显示的用户名为 Alice在这个示例中，我们启用了 Cypress 的服务器模式，然后使用 cy.route() 方法拦截了 /api/users 请求，并返回了 { name: 'Alice' } 数据。接着我们访问了 /users 页面，并等待 /api/users 请求完成。最后，我们确认页面上显示的用户名为 Alice。
Cypress 中如何修改 API 请求
在拦截了 API 请求后，我们可以通过返回的对象来修改响应的数据。这个对象有几个重要的属性：
method：请求的方法，比如 GET、POST、PUT、DELETE 等；url：请求的 URL；status：响应的状态码；response：响应的数据。
我们可以通过修改这些属性来修改响应的数据。下面是一个示例：
-- -------------------- ---- -------
-----------
----------
------- ------
---- -------------
--------- ---
---------- ----- -- -
----------------- - -
- ----- ------- --
- ----- ----- --
- ----- --------- -
-
-
-----------------
------------------
--------------------
------------------------------------------ --在这个示例中，我们拦截了 /api/users 的 GET 请求，并将响应的数据改为了一个包含三个对象的数组。我们通过 onRequest 回调函数来修改响应的数据。
Cypress 中如何模拟错误的响应
有时候我们需要模拟服务器返回错误的响应，以测试前端的错误处理机制是否正常。在 Cypress 中，我们可以通过修改响应的状态码来模拟错误的响应。下面是一个示例：
-- -------------------- ---- ------- ----------- ---------- ------- ------ ---- ------------- ------- ---- --------- - -------- --------- ------ ------ - ----------------- ------------------ -------------------- ------------------ --------- ---- -------- -- ------------
在这个示例中，我们拦截了 /api/users 的 GET 请求，并将响应的状态码改为了 500，同时返回了一个包含错误信息的对象。这样就可以模拟服务器返回错误的响应了。
Cypress 中如何模拟超时的响应
有时候我们需要模拟服务器返回超时的响应，以测试前端的超时处理机制是否正常。在 Cypress 中，我们可以通过设置 delay 属性来模拟超时的响应。下面是一个示例：
-- -------------------- ---- ------- ----------- ---------- ------- ------ ---- ------------- ------ ----- -- ---- - - --------- -- ----------------- ------------------ -------------------- - -------- ---- -- -- -- - - ------------------ --------- ---- -------- -- ------------
在这个示例中，我们拦截了 /api/users 的 GET 请求，并设置了一个延迟 5 秒的响应。我们通过 cy.wait() 方法来等待请求完成，同时设置了一个 6 秒的超时时间。这样就可以模拟服务器返回超时的响应了。
总结
通过拦截和修改 API 请求，我们可以模拟各种场景，测试前端的各种处理机制是否正常。在 Cypress 中，我们可以使用 cy.route() 方法来拦截和修改 API 请求。通过这个方法，我们可以很方便地实现各种测试场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663ab9d4d3423812e48cd2a9