Cypress中如何拆分元素文本、打印日志并提取目标数值？

问题现象 #

开展Cypress自动化测试过程中，需要拆分页面渲染的文本内容，提取并打印其中的数字部分，遇到以下阻塞：

• 目标数字无法被正常识别打印，日志为空，尝试多种方案均未解决
• 最初猜测是文本类型取值方式导致Cypress无法识别，尝试调用invoke('val')方法取值，没有任何变化
• 运行现有代码仅能打印出字符i，无法得到目标数字

对应页面目标文本参考：

问题代码 #

cy.get('#__label14-bdi').invoke('text').then((text) => {
       cy.log(text)
       var splittext= text.split('')[1];
       cy.log(splittext);

错误原因 #

核心错误有两处：

1. text.split('')传入空字符串作为分隔符，会将完整文本拆分为单个字符组成的数组，取索引为1的元素仅能拿到文本的第二个字符，因此只会输出i，完全无法提取完整数字。
2. 误用invoke('val')方法：该方法仅适用于input、select、textarea这类表单元素，用来获取其value属性；bdi属于普通文本标签，不存在value属性，调用该方法自然拿不到有效结果。

修复方案 #

使用正则匹配提取文本中的数字部分，参考代码如下：

cy.get('#__label14-bdi').invoke('text').then((text) => {
  cy.log('原始文本：', text.trim())
  // 匹配文本中所有数字片段，拼接为完整数字字符串
  const numberVal = text.trim().match(/\d+/g)?.join('')
  cy.log('提取到的目标数字：', numberVal)
  // 后续可直接使用numberVal做断言或业务逻辑处理
})

如果文本中数字位置固定，也可根据实际分隔符调整拆分逻辑，正则匹配的方式容错性更高，优先推荐使用。

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