Cypress 如何在intercept的should回调中访问别名存储的页面文本做校验

问题根因 #

Cypress 所有命令都是异步入队执行的，cy.get('@别名')返回的是 Cypress 链式调用对象，而非别名存储的实际文本值，你需要通过 .then() 回调才能拿到别名对应的实际值，校验逻辑必须放在所有依赖值都获取完成的回调内执行。

推荐实现方式 #

更符合页面渲染逻辑的写法是等待接口返回后，直接将接口字段与页面展示值做校验，无需提前存储页面元素别名：

it('Check dashboard stats', () => {
    cy.intercept('GET', 'api/dashboard/kpi').as('kpi')
    cy.visit('/dashboard')
    // 等待接口请求完成
    cy.wait('@kpi').then(({ response }) => {
      expect(response.body).to.have.property('success', true)
      // 按实际接口返回结构调整字段取值路径
      const kpiData = response.body.data
      
      // 直接关联校验接口值和页面展示值
      cy.get('[data-cy=incomeThisMonthValue]').should('have.text', kpiData.incomeThisMonth)
      cy.get('[data-cy=bookingsThisMonthValue]').should('have.text', kpiData.bookingsThisMonth)
      cy.get('[data-cy=newCustomerThisMonthValue]').should('have.text', kpiData.newCustomersThisMonth)
    })
})

保留原有别名存储的实现方式 #

如果你需要提前存储页面文本到别名再做校验，可以通过嵌套 .then() 拿到别名的实际值后执行校验：

it('Check dashboard stats', () => {
    cy.intercept('GET', 'api/dashboard/kpi').as('kpi')

    cy.visit('/dashboard')
    cy.get('[data-cy=incomeThisMonthValue]').invoke('text').as('incomeThisMonth')
    cy.get('[data-cy=bookingsThisMonthValue]').invoke('text').as('bookingsThisMonth')
    cy.get('[data-cy=newCustomerThisMonthValue]').invoke('text').as('newCustomersThisMonth')

    cy.wait('@kpi').then(({ response }) => {
      expect(response.body).to.have.property('success', true)
      const kpiData = response.body.data
      
      // 通过.then拿到别名存储的实际文本值
      cy.get('@bookingsThisMonth').then(bookingsText => {
        cy.log(bookingsText) // 此处输出为预期的页面文本值
        // 建议加trim处理避免空格、换行符导致校验失败，数值转字符串与页面对比
        expect(bookingsText.trim()).to.equal(kpiData.bookingsThisMonth.toString())
      })
      cy.get('@incomeThisMonth').then(incomeText => {
        expect(incomeText.trim()).to.equal(kpiData.incomeThisMonth.toString())
      })
      cy.get('@newCustomersThisMonth').then(customerText => {
        expect(customerText.trim()).to.equal(kpiData.newCustomersThisMonth.toString())
      })
    })
})

注意事项 #

• 页面文本可能存在多余的空格、换行符，建议校验前调用 .trim() 处理
• 接口返回的数值类型字段需要转成字符串后再和页面文本做对比

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