Cypress批量请求完成后如何正确获取DOM元素

问题根源 #

原代码出现异常的核心原因是循环注册了多个匹配规则完全一致的cy.intercept，这类重复的同规则拦截器会按注册顺序依次匹配请求，极易出现匹配逻辑混乱、重复触发的问题。

正确实现方案 #

Cypress原生支持等待同一个拦截别名的多次请求，无需循环注册多个拦截器，按以下步骤实现即可：

1. 提前注册拦截规则（必须在触发批量请求的操作之前执行）
2. 执行触发批量请求的操作（如页面加载、点击批量操作按钮等）
3. 等待指定次数的拦截请求完成，可自定义超时时间适配慢响应场景

示例代码如下：

// 1. 注册拦截规则，替换为你实际的请求方法和url匹配规则
cy.intercept('POST', '你的postUrl匹配规则').as('postReq')
cy.intercept('GET', '你的getUrl匹配规则').as('getReq')

// 2. 这里编写触发批量请求的操作，示例：
// cy.visit('/account-list')
// cy.get('#batch-query-btn').click()

// 3. 等待所有请求完成，设置超时时间避免响应慢报错（单位：毫秒）
// 写法1：统一等待所有请求
cy.wait(
  ['@postReq', '@postReq', '@postReq', '@postReq', '@getReq', '@getReq', '@getReq'],
  { timeout: 15000 }
)

// 写法2：分别按次数等待，逻辑更清晰
// cy.wait('@postReq', { times: 4, timeout: 15000 })
// cy.wait('@getReq', { times: 3, timeout: 15000 })

// 后续执行DOM操作逻辑
cy.get('.account-info-dom').should('exist')

注意事项 #

• 若url包含动态参数，可以用正则或glob规则匹配，例如/\/api\/account\/\d+\/detail/可匹配带动态账户ID的路径
• 默认cy.wait超时时间为5秒，可根据接口实际响应速度调整超时参数，避免误抛不存在元素的错误

内容的提问来源于stack exchange，提问作者OSW