使用Cypress统计页面元素数量始终返回0该如何解决？

问题原因 #

• Cypress 所有命令都是异步队列执行机制，cy.get()、find() 不会立刻同步执行，你在方法末尾同步返回countItems时，.then()内部的赋值逻辑还未运行，所以永远拿到初始值0。
• 你当前的查找逻辑是统计#center_column下的所有div，如果你是要统计class为product-image-container的目标元素，选择器规则也不准确。

解决方案 #

根据使用场景可以选择两种实现方式：

1. 直接在测试逻辑中统计使用 #

不需要单独封装方法时，直接通过命令链获取结果即可：

// 直接统计目标元素数量
cy.get('#center_column div.product-image-container').its('length').then(count => {
  // 所有依赖数量的逻辑都写在这个回调内即可，比如断言
  expect(count).to.be.greaterThan(0)
  // 其他业务逻辑
})

2. 封装为可复用方法 #

如果需要多次调用统计逻辑，直接返回Cypress命令链，调用时通过.then()拿结果：

// 封装方法
countMaterials(){
  // 返回Cypress异步链式对象，不要同步返回数值
  return cy.get('#center_column').find('div.product-image-container').its('length')
}

// 调用示例
countMaterials().then(count => {
  console.log('统计到的元素数量：', count)
  // 后续业务逻辑
})

注意事项 #

不要尝试在Cypress异步命令之外同步获取异步操作的结果，所有依赖统计结果的逻辑都必须放在.then()回调中执行。

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