如何让Cypress的contains返回布尔值而非直接触发测试失败

Cypress 所有cy.开头的命令都是异步入队执行的，不会同步返回布尔值，且cy.contains默认匹配不到元素时会直接抛出错误终止测试，自然无法放到while条件里做判断。

可以用递归函数替代while循环，配合同步的DOM查询判断元素是否存在，同时增加最大滚动次数限制避免无限循环，实现代码如下：

// 封装递归滚动查找函数
function scrollToFindOption(targetTextRegex, maxScrollTimes = 10, currentTimes = 0) {
  // 用Cypress.$同步查询当前页面是否存在目标元素，不会触发测试失败
  if (Cypress.$(`.ant-select-item:contains('${targetTextRegex.source}')`).length) {
    // 找到元素后直接返回，后续可以继续执行断言或交互逻辑
    return
  }
  // 触发滚动前先判断是否超过最大滚动次数，避免死循环
  if (currentTimes >= maxScrollTimes) {
    throw new Error(`滚动${maxScrollTimes}次后仍未找到目标元素`)
  }
  // 触发下拉框滚动
  cy.get('.ant-select-dropdown').trigger('wheel', {deltaX:0, deltaY:100})
  // 等待虚拟列表渲染完成后递归调用自身
  cy.wait(100).then(() => {
    scrollToFindOption(targetTextRegex, maxScrollTimes, currentTimes + 1)
  })
}

// 业务侧调用方式
scrollToFindOption(/^Cypress$/)
// 确认找到后执行后续操作，比如点击选中
cy.contains('.ant-select-item', /^Cypress$/).click()

补充说明 #

• 可以根据下拉列表单次滚动加载的数据量，调整maxScrollTimes参数的取值，适配不同长度的选项列表
• 可以根据页面渲染速度调整cy.wait的等待时长，避免滚动后未完成渲染就执行元素查询导致的判断误差
• 该实现为Cypress原生方案，无需引入额外第三方依赖，兼容性覆盖所有主流Cypress版本

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