Cypress 是一个流行的前端自动化测试工具，可以对 Web 应用程序进行 E2E 测试、验收测试和集成测试。在测试过程中，我们可能需要模拟后端接口的请求和响应，以便测试前端应用的不同状态和场景。这时，就需要使用 Cypress 的 intercept 方法截取请求并进行处理。
什么是 intercept？
intercept 是 Cypress 的一个方法，可以用来截取 AJAX 请求和响应，并进行处理。它能够模拟网络请求、更改请求的参数、更改请求的响应、延迟响应等操作。使用 intercept 可以直接在浏览器中修改网络请求和响应的数据，而无需借助外部工具。
如何使用 intercept？
在 Cypress 中，可以通过 cy.intercept 来使用 intercept 方法。下面是一个简单的使用例子：
cy.intercept('GET', '/api/users', (req) => { req.reply({ body: [{ name: 'john' }] }) })
以上代码用于截取 GET 请求 /api/users，并返回 { body: [{ name: 'john' }] } 作为响应数据。
下面我们来详细介绍 intercept 的使用方法。
截取请求
使用 cy.intercept 可以拦截所有的请求：
cy.intercept((req) => { console.log(req) })
可以看到，req 里包含了请求的方法、路径、请求头、请求体等信息，可以通过 req.url、req.method、req.body 等属性来获取。
我们也可以通过指定匹配规则来截取特定请求：
cy.intercept('GET', '/api/users', (req) => { console.log(req) })
以上代码用于截取 GET 请求 /api/users，并在控制台输出请求信息。
更改请求
使用 intercept 可以更改请求的参数、请求头、请求体等：
cy.intercept('POST', '/api/users', (req) => { req.body.name = 'mary' req.headers['X-Auth-Token'] = '12345' })
以上代码用于截取 POST 请求 /api/users，并更改请求体中的 name 参数和请求头中的 X-Auth-Token 参数。
更改响应
使用 intercept 还可以更改响应的数据：
cy.intercept('GET', '/api/users', (req) => { req.reply({ body: [{ name: 'john' }] }) })
以上代码用于截取 GET 请求 /api/users，并返回 { body: [{ name: 'john' }] } 作为响应数据。
延迟响应
使用 intercept 可以模拟网络延迟：
cy.intercept('GET', '/api/users', (req) => { req.reply((res) => { res.send({ body: [{ name: 'john' }] }).delay(1000) }) })
以上代码用于截取 GET 请求 /api/users，并在 1 秒后返回 { body: [{ name: 'john' }] } 作为响应数据。
示例代码
下面是一个完整的例子，演示了如何使用 intercept 模拟 AJAX 请求和响应：
-- -------------------- ---- ------- --------------------- -- -- - ---------- --------- ---- ---------- -- -- - ------------------- ------------- ----- -- - ----------- ----- -- ----- ------ -- -- -- ------------- ------------------ ---- ---------------------- -- -------------------- ------- -- ---------- ------ ---- ---------- -- -- - -------------------- ------------- ----- -- - ------------- - ------ --------------------------- - ------- -- ------------- ----------------------------------- ------------------ ---- ---------------------- -- -------------------- ------- -- ---------- ------ ---- ----------- -- -- - ------------------- ------------- ----- -- - ----------- ----- -- ----- ----- ---- -- -- -- ------------- ------------------ ---- ---------------------- -- -------------------- ----- ----- -- ---------- ----- ---- ----------- -- -- - ------------------- ------------- ----- -- - --------------- -- - ---------- ----- -- ----- ------ -- -------------- -- -- ------------- ------------------ ---- ---------------------- -- -------------------- ------- -- --展开代码
以上代码在 Cypress 中测试了 4 个场景：
- 模拟 AJAX 请求并返回
{ body: [{ name: 'john' }] }作为响应数据； - 拦截 AJAX POST 请求并将请求体中的
name参数修改为mary，请求头中的X-Auth-Token参数修改为12345； - 拦截 AJAX GET 请求并将返回的数据修改为
{ body: [{ name: 'john doe' }] }； - 拦截 AJAX GET 请求并延迟 1 秒钟返回数据。
总结
使用 Cypress 的 intercept 方法可以模拟网络请求和响应，更改请求和响应的数据，便于测试前端应用的各种状态和场景。在实际的测试中，我们可以结合 intercept 和 cy.wait、cy.clock 等方法来编写更加灵活和多样化的测试用例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ac92d8add4f0e0ff6288a5
