Cypress双击或点击加回车操作未触发预期DOM变更，AG Grid单元格无法进入编辑状态

根因说明 #

你遇到的间歇性编辑触发失败是AG Grid类表格组件的常见测试问题：

• Cypress默认的双击事件时间间隔、点击位置判定和AG Grid的编辑触发阈值不匹配，容易被识别为两次独立单击而非双击
• 单元格从展示态切换到编辑态有异步DOM渲染逻辑，硬编码等待无法适配不同运行环境的渲染速度差异
• 部分AG Grid版本存在点击失焦的默认逻辑，重复无判定的输入操作会强制退出编辑状态

稳定实现方案 #

方案1：自定义双击触发（适配AG Grid交互规则） #

手动控制两次点击的间隔，匹配AG Grid的双击识别阈值，全程用断言替代硬等待：

const cellSelector = `.mfc-dialog-overlay div[ref="eCenterContainer"] div[col-id="${field}"]`;

// 定位单元格并触发符合AG Grid规则的双击
cy.get(cellSelector)
  .should('be.visible')
  .click()
  .wait(150) // 间隔设置为100-200ms之间即可匹配绝大多数AG Grid版本的双击判定
  .click();

// 等待单元格进入编辑状态
cy.get(cellSelector)
  .should('have.class', 'ag-cell-inline-editing', { timeout: 3000 })
  // 等待输入框渲染完成后执行输入
  .find('msc-numeric-input input', { timeout: 2000 })
  .should('be.visible')
  .clear()
  .type(value);

// 执行后续操作
cy.get(this.HEADER_ON_RATES_POPOVER).click();

方案2：调用AG Grid官方API（最稳定兜底方案） #

跳过模拟交互的不稳定环节，直接通过AG Grid暴露的编程API开启编辑状态，适用所有场景：

const cellSelector = `.mfc-dialog-overlay div[ref="eCenterContainer"] div[col-id="${field}"]`;

cy.get(cellSelector)
  .should('be.visible')
  .then($cell => {
    // 获取AG Grid实例，可根据项目实际的组件挂载逻辑调整实例获取路径
    const gridApi = Cypress.$('.ag-root').closest('ag-grid-angular')[0]['agGrid'].api;
    const rowIndex = Number($cell.closest('.ag-row').attr('row-index'));
    const colId = $cell.attr('col-id');
    // 直接调用官方API开启单元格编辑
    gridApi.startEditingCell({
      rowIndex: rowIndex,
      colKey: colId
    });
  });

// 等待输入框渲染完成后输入
cy.get('msc-numeric-input input', { timeout: 3000 })
  .should('be.visible')
  .type(value);

cy.get(this.HEADER_ON_RATES_POPOVER).click();

内容的提问来源于stack exchange，提问作者I. Tennant