如何解决Cypress中提取h1/span文本时have.value断言失败问题？

你之前的错误在于使用了have.value断言——这个断言是针对表单控件（如input、select）的value属性设计的，而<h1>、<span>这类普通元素的文本内容并不存储在value属性中，所以会返回空值导致断言失败。

针对这类元素，正确的文本验证方式有两种：

1. 直接使用have.text断言 #

这是最简洁的方式，直接验证元素的文本内容：

// 验证h1的文本内容
cy.get('.heading-1').should('have.text', 'Collectie')

// 验证span的文本内容
cy.get('.results').should('have.text', '4655')

2. 提取文本后验证（适合需要复用文本的场景） #

如果需要提取文本内容用于后续操作，可以结合invoke('text')和then方法：

// 提取并验证h1文本（若有前后空格可加trim()处理）
cy.get('.heading-1')
  .invoke('text')
  .then(text => {
    expect(text.trim()).to.equal('Collectie')
  })

// 提取并验证span文本
cy.get('.results')
  .invoke('text')
  .then(text => {
    expect(text).to.equal('4655')
  })

注意：如果页面渲染时元素文本可能带有前后空格，建议使用trim()去除空格后再断言，避免不必要的失败。

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