Cypress中如何实现点击按钮直到其消失的自动化操作？

核心通过递归函数处理不固定次数的点击逻辑，同时限制最大点击次数避免死循环，自动适配按钮禁用、按钮消失两个终止条件。

完整实现代码 #

// 配置最大点击次数，可根据业务调整
const MAX_LOAD_MORE_CLICKS = 10;

// 递归加载函数
const loadAllItems = (clickedCount = 0) => {
  // 达到最大点击次数直接终止，防止页面异常导致死循环
  if (clickedCount >= MAX_LOAD_MORE_CLICKS) return;

  // 先查询当前页面是否存在加载更多按钮
  cy.get('body').then($body => {
    // 此处替换为你的加载按钮实际选择器，优先使用id、自定义属性等稳定选择器
    const loadBtn = $body.find('[data-testid="load-more-btn"]');
    // 按钮不存在说明全部加载完成，终止逻辑
    if (!loadBtn.length) return;

    // 等待按钮解除禁用状态后点击
    cy.wrap(loadBtn)
      .should('be.visible')
      .and('not.be.disabled')
      .click()
      .then(() => {
        // 可选：如果有加载动画，可增加等待加载完成的逻辑，提升稳定性
        // cy.get('.global-loading').should('not.exist');
        // 递归调用，点击次数累加
        loadAllItems(clickedCount + 1);
      });
  });
};

// 执行加载逻辑
loadAllItems();

额外优化建议 #

• 优先使用自定义测试属性比如data-testid作为按钮选择器，避免页面文本、样式修改导致用例失效
• 如果需要确认加载有效性，可以在点击前后记录列表条目数量，新增断言判断条目数量是否增加，避免按钮点击无响应的异常场景
• 若接口响应较慢，可以给should断言增加超时配置，比如.should('not.be.disabled', { timeout: 10000 })适配长加载场景

内容的提问来源于stack exchange，提问作者João