如何在Cypress中处理懒加载元素？滚动加载失效问题

不用非得用cypress-recurse插件，原生Cypress完全能解决这类懒加载滚动触发的问题。你的核心问题在于直接滚到底部+固定等待的方式太粗糙，没法精准触发分段加载逻辑，或者等待时机不对。下面是几个原生解决方案：

1. 滚动到目标元素区域触发加载 #

直接定位你要测试的懒加载元素，滚动到它的可见范围内，结合Cypress的断言等待元素加载完成，比盲目滚到底更精准：

it('Trigger lazy load by scrolling to target element', () => {
  cy.visit('your-url-here');
  
  // 定位需要测试的懒加载图片元素
  cy.get('.lazy-loaded-img')
    .scrollIntoView({ offset: { top: 150, left: 0 } }) // 滚动到元素上方150px，确保触发加载逻辑
    .should('be.visible') // 等待元素可见，确认加载完成
    .and(($img) => {
      // 额外验证图片是否真的加载完成
      expect($img[0].naturalWidth).to.be.greaterThan(0);
    });
});

2. 分段滚动逐步触发加载 #

如果是无限滚动页面，一次性滚到底可能中间的加载逻辑没触发，试试分段滚动+递归调用，每次滚动后等待当前段内容加载：

it('Load content via step-by-step scrolling', () => {
  cy.visit('your-url-here');
  
  const scrollStep = 600; // 每次滚动的垂直距离
  const maxScrollAttempts = 8; // 限制最大滚动次数，避免无限循环

  const scrollAndWait = (attempts) => {
    if (attempts >= maxScrollAttempts) return;
    
    // 滚动指定距离
    cy.window().then(win => win.scrollBy(0, scrollStep));
    
    // 这里可以替换成等待新元素出现，比固定等待更可靠
    cy.get('.lazy-img').should('have.length.greaterThan', attempts * 3);
    
    // 递归调用，继续滚动
    scrollAndWait(attempts + 1);
  };

  scrollAndWait(0);
  
  // 最终断言所有需要的元素都加载完成
  cy.get('.lazy-img').should('have.length', 24);
});

3. 监听请求或加载事件替代硬等待 #

别用固定的cy.wait(5000)，而是监听页面的AJAX请求或图片加载事件，确保内容真的加载完成再继续：

it('Wait for API requests before asserting', () => {
  cy.visit('your-url-here');
  
  // 拦截懒加载图片的API请求
  cy.intercept('GET', '/api/lazy-images/**').as('loadLazyImages');
  
  // 滚动到底部
  cy.scrollTo('bottom');
  
  // 等待请求完成，而不是硬等时间
  cy.wait('@loadLazyImages');
  
  // 断言图片加载完成
  cy.get('.lazy-img').each(($img) => {
    expect($img[0].complete).to.be.true;
  });
});

核心思路就是抛弃固定时间等待，基于元素状态或请求状态判断加载完成，滚动时尽量针对需要测试的目标区域，而不是盲目滚动整个页面。

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