Cypress中如何正确获取span元素文本值用于后续相等断言

cy.get() 这类Cypress命令是异步排队执行的，直接将命令返回值赋值给变量，拿到的不是DOM元素也不是文本内容，而是Cypress自身的链式调用包装对象。你用两个包装对象做equal断言，本质是对比两个不同的实例对象，自然会触发你看到的对象不匹配报错。

你需要通过.invoke('text')命令从DOM元素上yield出文本字符串，在Cypress的命令链回调中拿到实际值后再做断言，参考代码如下：

// 定位到目标span元素，提取文本后在回调中取值
cy.get('.cat-results-url span') // 直接匹配a标签下的span，定位更精准
  .eq(0) // 取第一个匹配的span
  .invoke('text') // 提取元素的innerText，返回字符串类型
  .then(actualText => {
    // 这里的actualText才是你需要的"Title I want to compare"文本值
    // 假设你要对比的第二个文本来自另一个同结构span，比如第二个.cat-results-url下的span
    cy.get('.cat-results-url span')
      .eq(1)
      .invoke('text')
      .then(expectedText => {
        // 加trim()是为了去除文本前后可能存在的换行、空格等不可见字符，避免误判
        expect(actualText.trim()).to.equal(expectedText.trim())
      })
  })

如果需要对比的两个元素位置间隔较远，可以用别名暂存提取到的文本，避免过深的回调嵌套：

// 提取第一个文本存为别名
cy.get('.cat-results-url span').eq(0).invoke('text').as('firstTitle')
// 提取第二个文本存为别名
cy.get('.cat-results-url span').eq(1).invoke('text').as('secondTitle')

// 取值对比
cy.get('@firstTitle').then(firstTitle => {
  cy.get('@secondTitle').should('equal', firstTitle.trim())
})

• 不要尝试在Cypress命令链外部用const/let直接接收命令返回值当普通同步变量使用，永远在.then()回调中处理异步返回的实际值
• 提取文本时建议直接把选择器写到目标span层级，减少父元素再找子元素的多余调用，定位更精准
• 如果需要对比的文本存在动态加载的情况，Cypress自带的重试机制会自动等待元素渲染完成、文本加载完毕后再执行断言，不需要手动加等待

内容的提问来源于stack exchange，提问作者Bartłomiej Ambroziak