如何在Cypress中避免多别名断言时的深度嵌套结构？

针对你遇到的多层嵌套问题，这里有几个实用的解决办法：

1. 利用cy.then()与上下文this一次性获取所有别名 #

Cypress会把所有别名挂载到回调函数的this对象上（注意要用普通函数，不能用箭头函数），可以直接批量取出值：

cy.get(selector1).invoke('val').as('alias1')
cy.get(selector2).invoke('val').as('alias2')
cy.get(selector3).invoke('text').as('alias3')
cy.get(selector4).invoke('text').as('alias4')
cy.get(selector5).invoke('text').as('alias5')

// 一次性取出所有别名对应的值
cy.then(function() {
  const val1 = this.alias1
  const val2 = this.alias2
  const val3 = this.alias3
  const val4 = this.alias4
  const val5 = this.alias5

  expect([val1, val2, val3, val4, val5]).to.deep.eq(myFixture)
})

2. 用cy.all()并行获取（Cypress 12+适用） #

如果你的Cypress版本是12及以上，cy.all()可以并行处理多个别名或命令，直接返回结果数组，彻底消除嵌套：

cy.get(selector1).invoke('val').as('alias1')
cy.get(selector2).invoke('val').as('alias2')
cy.get(selector3).invoke('text').as('alias3')
cy.get(selector4).invoke('text').as('alias4')
cy.get(selector5).invoke('text').as('alias5')

cy.all('@alias1', '@alias2', '@alias3', '@alias4', '@alias5').then(([val1, val2, val3, val4, val5]) => {
  expect([val1, val2, val3, val4, val5]).to.deep.eq(myFixture)
})

3. 将所有值存入单一对象别名 #

如果需要多次复用这些值，可以先把所有值整合到一个对象里存为别名，后续只需一层回调就能获取：

// 先收集所有值到一个对象
cy.get(selector1).invoke('val').then(val1 =>
  cy.get(selector2).invoke('val').then(val2 =>
    cy.get(selector3).invoke('text').then(val3 =>
      cy.get(selector4).invoke('text').then(val4 =>
        cy.get(selector5).invoke('text').then(val5 =>
          cy.wrap({val1, val2, val3, val4, val5}).as('allValues')
        )
      )
    )
  )
)

// 后续断言时直接取出整个对象
cy.get('@allValues').then(({val1, val2, val3, val4, val5}) => {
  expect([val1, val2, val3, val4, val5]).to.deep.eq(myFixture)
})

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