Cypress中如何提取元素文本里冒号后的目标字符串片段

直接使用have.text会匹配元素的全量文本内容，由于你获取到的li文本自带stock name: 、stock id: 前缀，和目标值完全不匹配，所以断言失败。以下是可直接落地的实现方式：

方案1：即时截取文本后断言（最常用） #

通过invoke('text')拿到元素完整文本，按冒号分割后取后半段，去除首尾空格后再做断言，同时修正原代码选择器缺少闭合双引号的语法问题：

// 校验股票名称
cy.get(".column:nth-child(1)")
  .find('li')
  .eq(0)
  .invoke('text')
  .then(text => {
    const stockName = text.split(':')[1].trim()
    expect(stockName).to.eq('apple inc')
  })

// 校验股票ID
cy.get(".column:nth-child(1)")
  .find('li')
  .eq(1)
  .invoke('text')
  .then(text => {
    const stockId = text.split(':')[1].trim()
    expect(stockId).to.eq('23244')
  })

方案2：包含断言（仅适合快速校验，严谨度低） #

如果不需要严格匹配精确值，仅确认目标内容存在于文本中，可以直接用include.text断言，缺点是如果文本其他位置出现相同字符串会出现误判：

cy.get(".column:nth-child(1)").find('li').eq(0).should('include.text', 'apple inc')
cy.get(".column:nth-child(1)").find('li').eq(1).should('include.text', '23244')

方案3：封装自定义命令（适合高频使用场景） #

如果项目中大量存在标签: 值格式的文本需要校验，可以在Cypress支持文件中封装自定义断言命令，减少重复代码：

// 在cypress/support/commands.js中添加
Cypress.Commands.add('assertTextAfterColon', { prevSubject: 'element' }, (el, expected) => {
  cy.wrap(el)
    .invoke('text')
    .then(fullText => {
      const actual = fullText.split(':')[1].trim()
      expect(actual).to.equal(expected)
    })
})

封装后测试用例可以直接链式调用：

cy.get(".column:nth-child(1)").find('li').eq(0).assertTextAfterColon('apple inc')
cy.get(".column:nth-child(1)").find('li').eq(1).assertTextAfterColon('23244')

注意：文本分割后调用trim()是为了兼容冒号前后存在多余空格的场景，避免因为空格、换行等不可见字符导致断言失败。

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