Cypress如何递归点击可见的Show more upcoming按钮直至其消失

你现有代码的报错来自三个核心问题：

• cy.get(".mat-flat-button.mat-primary") 默认带有「元素必须存在」的内置断言，当最后一页加载完成、按钮从DOM中移除时，这行命令会直接抛出「找不到元素」的错误，根本不会走到后续的可见性判断逻辑。
• cy.intercept 注册逻辑存在时序风险：拦截器注册和点击触发的间隔过短，可能出现请求已经发出、拦截器还未生效的情况，导致cy.wait超时。
• 选择器匹配精度不足：.mat-flat-button.mat-primary是通用样式类，可能匹配到页面上其他同样式按钮，导致逻辑误判。

调整递归逻辑，首先关闭元素查询的默认失败断言，同时判断元素存在+可见两个条件再执行点击，确保拦截器在点击前完成注册，代码如下：

checkVisibilityUpcoming(): void {
  // 精准匹配文本为「Show more upcoming」的按钮，配置元素不存在时不抛错，缩短查询超时
  cy.contains('button', 'Show more upcoming', {
    timeout: 2000,
    failOnNonExistence: false
  }).then($button => {
    // 同时满足「元素存在于DOM」+「元素可见」两个条件才执行点击
    if ($button.length && Cypress.dom.isVisible($button)) {
      // 紧邻点击前注册接口拦截，补全HTTP方法避免误拦截
      cy.intercept('GET', 'https://apilink').as('upcomingListLoad')
      cy.wrap($button).click()
      // 等待接口返回、新列表渲染完成后再进入下一轮检查
      cy.wait('@upcomingListLoad')
      // 递归执行下一轮判断
      this.checkVisibilityUpcoming()
    }
    // 条件不满足时直接退出递归，无任何报错
  })
}

如果你使用的Cypress版本较低（<9.0）不支持failOnNonExistence配置，可以直接通过jQuery原生方式查询元素，完全跳过Cypress的内置元素存在断言，实现如下：

checkVisibilityUpcoming(): void {
  cy.document().then(doc => {
    // 直接从DOM树查询目标按钮，不会触发Cypress自动断言
    const $button = Cypress.$(doc).find('button:contains("Show more upcoming")')
    if ($button.length && Cypress.dom.isVisible($button)) {
      cy.intercept('GET', 'https://apilink').as('upcomingListLoad')
      cy.wrap($button).click()
      cy.wait('@upcomingListLoad').then(() => {
        this.checkVisibilityUpcoming()
      })
    }
  })
}

• 拦截配置建议补全HTTP方法（GET/POST等），不要仅填写URL，避免拦截到同路径的其他类型请求。
• 如果接口返回后按钮有加载禁用态，可以在cy.wait后追加一句cy.get('@upcomingListLoad').its('response.statusCode').should('eq', 200)，确认接口加载成功后再进入递归，避免时序问题。
• 不要依赖样式类选择器定位操作元素，样式类名随前端版本迭代变动概率极高，优先使用文本、专属测试id等稳定属性定位。

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