Cypress如何测试加载更多按钮：重复点击直至按钮消失

嘿，这个场景我太熟悉了！当不确定「加载更多」按钮需要点击多少次时，用递归函数是Cypress里最稳妥的解决方案——毕竟Cypress的命令都是异步的，普通的for/while同步循环根本没法适配它的执行顺序。结合你给出的单次加载测试代码，我给你整理了一套完整的实现方案：

核心思路 #

写一个递归函数，每次执行完一轮加载流程后，检查「加载更多」按钮是否还存在：

1. 如果按钮存在，就重复执行加载步骤，然后递归调用自己
2. 如果按钮消失，就终止循环，说明所有内容都加载完成了

完整代码实现 #

// 定义递归加载函数，可选添加最大尝试次数防止死循环
const loadMoreUntilGone = (maxAttempts = 10) => {
  // 先判断是否达到最大尝试次数，避免无限循环
  if (maxAttempts <= 0) {
    cy.log('已达到最大尝试次数，停止加载');
    return;
  }

  cy.get('body').then($body => {
    // 检查加载更多按钮是否存在（用body查找避免按钮不存在时cy.get报错）
    if ($body.find('#loadmore').length > 0) {
      // 执行你原本的单次加载流程
      cy.get('#loadmore').click();
      cy.get('#loadmore').contains(text.loading);
      cy.wait('@loadPosts'); // 确保你已经提前用cy.intercept拦截并命名了这个请求

      // 动态验证文章数量增加5篇（代替原代码里硬编码的n+5）
      cy.get('.blog .article').then($articles => {
        const currentCount = $articles.length;
        cy.get('.blog .article').should('have.length', currentCount + 5);
      });

      cy.get('#loadmore').contains(text.loadmore);

      // 递归调用，继续检查是否需要加载更多，尝试次数减1
      loadMoreUntilGone(maxAttempts - 1);
    } else {
      cy.log('所有文章已加载完成！');
    }
  });
};

// 在测试用例中使用这个函数
describe('博客文章加载测试', () => {
  beforeEach(() => {
    // 提前拦截加载文章的请求并命名，确保cy.wait('@loadPosts')能生效
    cy.intercept('GET', '/api/posts').as('loadPosts');
    cy.visit('/your-blog-page-url');
  });

  it('自动加载所有内容直到「加载更多」按钮消失', () => {
    // 可选：验证初始加载的文章数量
    cy.get('.blog .article').should('have.length', 5);
    
    // 启动递归加载
    loadMoreUntilGone();
  });
});

关键细节说明 #

1. 用body查找按钮：如果直接用cy.get('#loadmore')，当按钮不存在时Cypress会直接报错失败。而通过cy.get('body').then($body => $body.find('#loadmore'))的方式，可以安全判断按钮是否存在。
2. 动态验证文章数量：原代码里的n+5是硬编码值，递归时我们需要动态获取当前文章数量再做断言，这样每次加载都能正确验证数量增长。
3. 最大尝试次数限制：添加maxAttempts参数是为了防止因为前端bug（比如按钮一直不消失）导致测试陷入无限循环，你可以根据实际需求调整这个数值。
4. 确保请求拦截正确：cy.wait('@loadPosts')依赖你提前用cy.intercept对加载文章的接口进行拦截并命名，一定要确保这个拦截的URL和实际请求一致。

内容的提问来源于stack exchange，提问作者Karolína Vyskočilová