Cypress中.click()函数行为不一致导致编辑框输入失败问题

你的问题本质是AG Grid单元格点击后，编辑框的渲染是异步操作，直接链式调用click().type()会因为Cypress未等待编辑框出现而随机失败。以下是几种可靠的解决方法：

方法一：等待可输入元素出现 #

点击单元格后，明确等待内部的可输入元素（通常是<input>）加载完成，再执行输入操作：

// 点击目标单元格
cy.get('.ag-row-last > [aria-colindex="3"]').click()
// 等待对应列的编辑输入框出现，再输入内容
cy.get('.ag-row-last [col-id="weight"] input')
  .type('65{enter}')

如果需要更精准的等待，可以添加超时参数：

cy.get('.ag-row-last [col-id="weight"] input', { timeout: 5000 })
  .type('65{enter}')

方法二：调用AG Grid API强制触发编辑 #

直接通过AG Grid的官方API启动单元格编辑，避免点击操作的不确定性：

// 获取页面上的AG Grid实例（需根据项目实际挂载方式调整）
cy.window().then(win => {
  const gridApi = win.gridOptions.api
  // 触发最后一行、col-id为weight的单元格进入编辑状态
  gridApi.startEditingCell({
    rowIndex: gridApi.getDisplayedRowCount() - 1,
    colKey: 'weight'
  })
})
// 编辑框出现后执行输入
cy.get('input[col-id="weight"]').type('65{enter}')

方法三：等待单元格进入编辑状态 #

通过检查单元格的CSS类，确认其进入编辑模式后再输入：

cy.get('.ag-row-last > [aria-colindex="3"]')
  .click()
  // 等待单元格退出非编辑状态，进入编辑状态
  .should('not.have.class', 'ag-cell-not-inline-editing')
  .should('have.class', 'ag-cell-inline-editing')
// 在编辑状态下找到内部输入框并输入
cy.get('.ag-row-last > [aria-colindex="3"] input').type('65{enter}')

关键注意点 #

• 确保目标单元格带有is-editable类（你的HTML中已存在），确认单元格本身支持编辑
• 若页面存在元素遮挡，可先通过cy.click({ force: true })强制点击，但优先排查遮挡原因

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