Cypress回调函数中全局变量值不同步问题求解

问题原因 #

• Cypress 所有命令都是异步入队列执行的，cy.intercept 传入的请求回调函数，只有当实际网络请求被触发时才会执行。而你调用waitForCall属于测试代码同步执行阶段，此时还没有任何请求触发回调，所以读取到的counters一直是初始赋值的1。
• 你代码中cy.wrap(counters).as(counters)的写法不符合Cypress规范，as()方法要求传入字符串类型的别名，你传入对象不会生效。

解决方法 #

方案1：直接使用Cypress原生别名机制（推荐） #

Cypress本身就支持同一个拦截别名多次调用cy.wait，会自动按请求触发顺序依次等待，不需要自行维护计数：

// 仅需注册一次拦截
cy.intercept(method, url).as('callalias')

// 等待第1次请求
cy.wait('@callalias')
// 等待第2次请求，直接再调用一次即可
cy.wait('@callalias')
// 批量等待n次请求可以用如下写法
Cypress._.times(3, () => {
  cy.wait('@callalias')
})

方案2：修复自定义动态别名实现 #

如果你确实需要自定义计数逻辑，可以将counters的读取放到Cypress命令队列中，保证在请求触发后再读取最新值：

const counters = {}
function registerIntercept(method, url, name) {
  counters[name] = 0 // 初始值设为0，代表还没有请求触发
  cy.intercept(method, url, (req) => {
    counters[name]++
    req.alias = `${name}${counters[name]}`
  })
}

function waitForCall(call) {
  const name = call.substr(1)
  // cy.then 会将逻辑加入Cypress命令队列，前面的请求触发完成后才会执行
  cy.then(() => {
    const alias = `${call}${counters[name]}`
    waitForCall_(alias)
  })
}

function waitForCall_(call) {
  cy.wait(call)
  cy.wait(100)
}

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