How to wait for all requests to finish in Cypress

在使用 Cypress 进行端到端测试时，确保所有网络请求都完成是常见的需求，尤其是在进行数据依赖型操作之前。Cypress 提供了多种方法可以帮助我们管理和等待接口请求完成。以下是一些常用的方法：

使用 cy.wait() 方法

Cypress 允许我们使用 cy.wait() 方法来显式等待一个或多个特定的请求。首先，我们需要使用 cy.intercept() 来拦截网络请求，并为这些请求设置别名。

javascript
// 拦截 API 请求
cy.intercept('GET', '/api/users').as('getUsers')

// 触发请求
cy.visit('/users')

// 等待请求完成
cy.wait('@getUsers')

在上面的例子中，我们拦截了对 /api/users 的 GET 请求，并通过 as() 方法给这个请求设置了一个别名 getUsers。在页面访问或其他操作触发了这个请求后，我们使用 cy.wait() 并传入别名来等待这个请求完成。

处理多个请求

如果页面有多个请求需要等待，我们可以将它们分别设置别名，并在 cy.wait() 中按顺序等待它们。

javascript
cy.intercept('GET', '/api/users').as('getUsers')
cy.intercept('GET', '/api/posts').as('getPosts')

cy.visit('/dashboard')

// 等待多个请求
cy.wait(['@getUsers', '@getPosts'])

检查请求是否完成

有时，我们可能需要根据请求的响应来做进一步处理。我们可以在 cy.wait() 后接着使用 .then() 方法来访问请求的响应。

javascript
cy.wait('@getUsers').then((interception) => {
  // 使用 interception.response 来访问响应体
  assert.equal(interception.response.statusCode, 200, '验证状态码')
  assert.isNotEmpty(interception.response.body, '响应体不应为空')
})

使用轮询机制

在某些复杂的情况下，如果我们不能确定具体需要等待哪些请求，或者请求是动态生成的，我们可以使用一种简单的轮询机制，周期性地检查网络活动是否已经停止。

javascript
// 访问页面
cy.visit('/dynamic-requests')

// 使用递归函数和 cy.wait() 检查网络请求是否已经静默
function waitForIdleNetwork(){
  cy.wait(1000)  // 等待一秒
  cy.get('@networkIdle').then((idle) => {
    if (!idle) {
      waitForIdleNetwork()  // 如果网络不是静默的，继续等待
    }
  })
}

cy.intercept('*', (req) => {
  req.on('response', (res) => {
    cy.wrap(true).as('networkIdle')  // 每次请求响应时将状态标记为静默
  })
  req.continue()
}).as('anyRequest')

waitForIdleNetwork()  // 调用等待函数

在这个例子中，我们通过递归调用 waitForIdleNetwork 函数，直到网络活动停止。这种方法需要谨慎使用，因为它可能导致测试执行时间过长。

总结

在 Cypress 中，等待所有接口请求完成主要依赖于 cy.intercept() 和 cy.wait() 的组合使用。通过为请求设置别名，并在触发请求后显式等待这些别名，我们可以确保在进行后续测试步骤之前所有相关的网络请求都已完成。这有助于提高测试的准确性和可靠性。