Cypress中二次调用元素时无法获取文本值的问题

你的问题核心是点击操作后页面异步更新价格，但Cypress没等到更新完成就获取了元素文本，导致拿到临时的“-”或空值。以下是具体解决办法：

1. 强制等待文本格式符合预期 #

在获取新subtotal时，添加断言等待文本变为$xxx.xx格式，让Cypress自动重试直到条件满足：

it('select/unselect services and verify price change', () => {
  cy.get('[data-qa="subtotal"]')
    .invoke('text')
    .then((originalSubtotal) => {
      cy.log(originalSubtotal)
      
      cy.get('.summary-line')
        .invoke('text')
        .then((tpmsText) => {
          cy.log(tpmsText)
          
          cy.get('.icon-checkmark').click()
          
          // 等待新subtotal加载完成，确保格式正确
          cy.get('[data-qa="subtotal"]')
            .should('have.text', (text) => {
              expect(text).to.match(/^\$\d+\.\d{2}$/)
            })
            .invoke('text')
            .then((newSubtotal) => {
              cy.log(newSubtotal)
              // 这里可以添加价格对比的断言，比如 originalSubtotal 减去 tpmsText 等于 newSubtotal
            })
        })
    })
})

2. 简化嵌套结构，利用Cypress自动等待 #

Cypress的命令链本身会自动等待元素出现，没必要嵌套过多then，可以简化代码，减少上下文问题：

it('select/unselect services and verify price change', () => {
  // 先获取初始subtotal并存储
  cy.get('[data-qa="subtotal"]').invoke('text').as('originalSubtotal')
  cy.get('.summary-line').invoke('text').as('tpmsText')
  
  // 点击复选框
  cy.get('.icon-checkmark').click()
  
  // 获取更新后的subtotal，自动等待元素就绪
  cy.get('[data-qa="subtotal"]')
    .should('not.have.text', '-')
    .invoke('text')
    .then((newSubtotal) => {
      cy.log(newSubtotal)
      // 取出之前存储的值做断言
      cy.get('@originalSubtotal').then(original => {
        cy.get('@tpmsText').then(tpms => {
          // 这里可以做价格计算对比，比如转换为数字后验证差值
          const originalNum = parseFloat(original.replace('$', ''))
          const tpmsNum = parseFloat(tpms.replace('$', ''))
          const newNum = parseFloat(newSubtotal.replace('$', ''))
          expect(newNum).to.equal(originalNum - tpmsNum)
        })
      })
    })
})

3. 检查是否有加载状态需要等待 #

如果页面更新时有加载动画（比如 spinner），可以先等待加载元素消失，再获取subtotal：

// 假设加载元素的选择器是 .loading-spinner
cy.get('.icon-checkmark').click()
cy.get('.loading-spinner').should('not.exist') // 等待加载结束
cy.get('[data-qa="subtotal"]').invoke('text').then(newSubtotal => {
  cy.log(newSubtotal)
})

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