Cypress测试通过位置选择下拉选项时出现冻结问题求助

问题描述 #

我在Cypress测试中尝试选择id为empty-database-server的下拉菜单中数组位置1的未禁用选项，执行cy.get('#empty-database-server').select(1)时测试直接冻结——UI停更、进度轮不动，既不通过也不失败，Chrome标签完全无法交互，只能通过任务管理器关闭，网页还提示内存不足。这测试比我平时跑的其他测试简单得多，理论上内存应该够。试过用选项的name、value等其他标识符选择，结果一样；重启Cypress也没效果。

解决思路 #

• 先排查下拉菜单的DOM结构，确认是否存在大量隐藏/重复选项，或是选项渲染逻辑有循环引用导致DOM节点暴增。Cypress的select命令遍历选项时，这类情况容易触发内存泄漏。
• 改用原生DOM操作替代Cypress的select命令，绕开可能的命令内部逻辑问题：

  cy.get('#empty-database-server').then(selectEl => {
    const enabledOptions = Array.from(selectEl.querySelectorAll('option:not([disabled])'));
    if (enabledOptions.length > 1) {
      enabledOptions[1].selected = true;
      // 手动触发change事件，保证页面逻辑正常响应
      selectEl.dispatchEvent(new Event('change', { bubbles: true }));
    }
  });
  

• 禁用Cypress的自动等待/重试机制，强制命令仅执行一次：

  cy.get('#empty-database-server', { timeout: 1000, retryOnStatusCodeFailure: false }).then(selectEl => {
    const enabledOptions = Array.from(selectEl.querySelectorAll('option:not([disabled])'));
    if (enabledOptions.length > 1) {
      enabledOptions[1].selected = true;
      selectEl.dispatchEvent(new Event('change', { bubbles: true }));
    }
  });
  

• 确认下拉组件类型：如果是UI框架的模拟下拉组件（不是原生<select>标签），Cypress的select命令无法适配，需要改用模拟用户操作的方式：

  cy.get('#empty-database-server').click(); // 点击下拉展开按钮
  cy.get('.dropdown-option:not([disabled])').eq(1).click(); // 点击目标选项
  

• 查看Cypress日志和浏览器控制台，检查测试冻结前是否有渲染错误、无限循环事件监听等异常，这类问题往往是内存飙升的根源。
• 升级Cypress到最新稳定版，部分旧版本对原生select的处理存在内存泄漏bug。

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