使用Cypress cy.type()遇ResizeObserver报错，忽略配置无效求排查

错误原因 #

ResizeObserver loop completed with undelivered notifications 是浏览器层面的错误，本质是页面中的ResizeObserver在监听元素尺寸变化时，回调函数内的操作又触发了元素尺寸变更，导致Observer队列出现未处理的通知。这类错误通常不影响功能，但在Cypress测试环境中会被当作未捕获异常抛出，干扰测试执行。

你添加的异常捕获未生效的可能原因 #

1. 错误消息匹配不精确：实际抛出的错误消息可能存在大小写、标点符号或空格差异，导致includes()判断未命中。
2. 代码加载顺序问题：support/e2e.js中的异常监听代码可能未在测试代码之前加载，导致事件监听未注册成功。
3. Cypress版本兼容问题：部分旧版本Cypress对这类浏览器级异常的捕获逻辑存在缺陷。

解决建议 #

1. 优化异常捕获逻辑（优先尝试） #

改用正则表达式匹配错误消息，忽略大小写和细微格式差异，确保能命中目标错误：

Cypress.on('uncaught:exception', (err, runnable) => {
  if (/ResizeObserver loop completed with undelivered notifications/i.test(err.message)) {
    return false; // 忽略该错误
  }
});

2. 覆盖ResizeObserver避免循环触发 #

在support/e2e.js中添加以下代码，修改ResizeObserver的回调执行时机，避免同步循环：

const originalResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends originalResizeObserver {
  constructor(callback) {
    super((entries, observer) => {
      // 用setTimeout推迟回调，打破同步循环
      setTimeout(() => callback(entries, observer), 0);
    });
  }
};

3. 检查测试代码规范 #

你的getter直接在获取元素时执行type()操作，不符合Cypress最佳实践，建议拆分元素定位与操作：

// 仅定位元素
get signatureInput() {
  return cy.get('#signature');
}

// 在测试用例中执行输入操作
this.signatureInput.type('userName');

4. 确认support文件配置与加载顺序 #

检查cypress.config.js中是否正确指定了support文件路径，确保其在测试代码前加载：

module.exports = defineConfig({
  e2e: {
    supportFile: 'cypress/support/e2e.js',
    // 其他配置项
  }
});

5. 升级Cypress版本 #

如果使用的是旧版Cypress，升级到最新稳定版（如v13+），新版本对这类浏览器异常的处理更完善。

内容的提问来源于stack exchange，提问作者Mehmet Şirin Tarhan