Cypress中如何获取DOM元素数量的数值结果并完成值比对

问题场景 #

测试页面DOM结构如下：

• 容器div下存在3个span元素

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

• 业务代码自动统计span的总数量，将结果渲染到p标签内：

<p>3</p>

测试需要完成两个值的一致性校验：

• div下span的实际DOM数量
• 页面p标签内输出的业务统计值

之前尝试使用cy.get('div span').its('length')获取元素数量，但拿到的是span元素组成的链式对象，无法直接得到数值类型的长度做比对。

实现方案 #

踩坑的核心原因是Cypress的所有命令都是异步队列执行的，直接同步读取命令返回值拿到的永远是Chainer链式对象，不是命令实际执行后的结果，必须在链式回调里取值做校验。
直接用下面的代码就能完成校验：

// 先获取span的实际数量
cy.get('div span').its('length').then(actualCount => {
  // 读取p标签内的统计值，转成数值类型
  cy.get('p').invoke('text').then(text => {
    const renderCount = Number(text.trim())
    // 一致性断言
    expect(actualCount).to.eq(renderCount)
  })
})

如果想写得更简洁，可以用Cypress的别名能力存值后再比对：

cy.get('div span').its('length').as('spanTotal')
cy.get('p').invoke('text').then(numText => Number(numText.trim())).as('statsTotal')

cy.get('@spanTotal').then(total => {
  cy.get('@statsTotal').should('equal', total)
})

注意：its('length')本身是可以正确返回数值类型的元素长度的，不要在Cypress命令链外部同步取值，所有和命令执行结果相关的逻辑，都要放到then回调里编写。

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