Cypress测试运行器循环访问时视口随机缩小及ResizeObserver报错求助

在Cypress测试运行器GUI中，当通过cy.each或循环执行cy.visit访问多个页面时，测试过程会随机出现视口尺寸突然改变的情况——虽然测试最终能成功执行，但这个问题严重干扰调试时的观察过程。

排查发现，视口异常前会抛出未捕获异常：(uncaught exception)Error: ResizeObserver loop limit exceeded。目前通过全局拦截未捕获异常的方式让测试继续：

Cypress.on('uncaught:exception', (err, runnable) => {
  return false;
});

但这只是临时绕过，并未解决视口变化的根源问题。

其他开发者的类似遭遇与解决方案 #

不少开发者在循环执行页面访问时遇到过相同问题，核心原因是页面中的ResizeObserver回调在页面切换时未被正确清理，短时间内触发过于频繁超出浏览器循环限制，进而干扰了Cypress的视口控制。可以尝试以下针对性方案：

• 每次访问后强制重置视口：在cy.visit后显式设置固定视口，确保页面加载后视口保持一致：

  const baseUrl = 'https://www.kimbino.sk'
  const urls = ['/hypermarkety/', '/elektronika/', 'odev-obuv-a-sport', '/ostatne']
  cy.wrap(urls).each((url) => {
    cy.visit(baseUrl + url)
    cy.viewport(1280, 720) // 替换为你需要的固定视口尺寸
  })
  

• 精准拦截ResizeObserver异常：不要全局屏蔽所有异常，只处理ResizeObserver相关的错误，避免遗漏其他潜在问题：

  Cypress.on('uncaught:exception', (err, runnable) => {
    if (err.message.includes('ResizeObserver loop limit exceeded')) {
      return false
    }
    // 其他异常正常抛出，便于排查问题
    return true
  })
  

• 等待ResizeObserver回调稳定：页面加载后添加短暂等待，或等待关键元素渲染完成，给ResizeObserver足够时间完成回调：

  cy.wrap(urls).each((url) => {
    cy.visit(baseUrl + url)
    cy.get('header').should('be.visible') // 等待页面核心元素加载
    cy.viewport(1280, 720)
  })
  

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