Cypress如何无需链式调用即可获取并保存多个元素的初始值

完全可以不用嵌套链式调用实现需求，Cypress的别名机制和Promise整合能力都可以帮你避免多层回调嵌套，这里提供两种常用实现方案：

方案一：使用Cypress别名（官方推荐） #

Cypress提供的as()方法可以把命令执行结果暂存为别名，后续通过this.别名或者cy.get('@别名')读取，全程平级调用无嵌套：

// 依次获取三个指标初始值并存储为别名
cy.get('[data-cy="txt-dashboard-active_tours"]').invoke('text').then(txt => parseInt(txt, 10)).as('activeTours')
cy.get('[data-cy="txt-dashboard-active_drivers"]').invoke('text').then(txt => parseInt(txt, 10)).as('activeDrivers')
cy.get('[data-cy="txt-dashboard-total_capacity"]').invoke('text').then(txt => parseInt(txt, 10)).as('totalCapacity')

// 执行数值变更操作，结果也存为别名
cy.createTour('email', 'password').as('tourResponse')

// 统一读取所有别名完成校验
// 注意：此处不能用箭头函数，否则this指向无法正确获取别名值
cy.then(function() {
  cy.get('[data-cy="txt-dashboard-active_tours"]').should($div => {
    expect($div.text().trim()).equal((this.activeTours + 1).toString())
  })
  cy.get('[data-cy="txt-dashboard-active_drivers"]').should($div => {
    expect($div.text().trim()).equal((this.activeDrivers + 1).toString())
  })
  cy.get('[data-cy="txt-dashboard-total_capacity"]').should($div => {
    expect($div.text().trim()).equal((this.totalCapacity + this.tourResponse.vehicle.capacity).toString())
  })
})

方案二：使用Promise.all批量获取 #

如果偏好一次性拿到所有初始值，可以用Promise.all整合三个读取操作，代码层级更集中：

cy.then(() => {
  // 并行获取三个初始值，最终返回结构化的结果数组
  return Promise.all([
    cy.get('[data-cy="txt-dashboard-active_tours"]').invoke('text').then(txt => parseInt(txt, 10)),
    cy.get('[data-cy="txt-dashboard-active_drivers"]').invoke('text').then(txt => parseInt(txt, 10)),
    cy.get('[data-cy="txt-dashboard-total_capacity"]').invoke('text').then(txt => parseInt(txt, 10))
  ])
}).then(([activeTours, activeDrivers, totalCapacity]) => {
  // 执行变更操作
  cy.createTour('email', 'password').then((response: any) => {
    // 直接用解构得到的初始值完成校验
    cy.get('[data-cy="txt-dashboard-active_tours"]').should($div => {
      expect($div.text().trim()).equal((activeTours + 1).toString())
    })
    cy.get('[data-cy="txt-dashboard-active_drivers"]').should($div => {
      expect($div.text().trim()).equal((activeDrivers + 1).toString())
    })
    cy.get('[data-cy="txt-dashboard-total_capacity"]').should($div => {
      expect($div.text().trim()).equal((totalCapacity + response.vehicle.capacity).toString())
    })
  })
})

两种方案都可以彻底解决原来的多层嵌套问题，代码可读性和可维护性都更高。

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