CYPRESS操作jeditable双击编辑字段输入后触发回车无效如何解决

问题根因 #

你当前的实现和测试代码存在4个核心问题：

• 绑定选择器不匹配：JS初始化jeditable时用的选择器是.dblclick，但你提供的可编辑元素class是dblclick_dailycapacity，请先确认这是粘贴代码的笔误，否则功能本身无法触发，需要把初始化选择器改为.dblclick_dailycapacity
• 双击对象错误：应该双击绑定了jeditable事件的目标元素#23_27，而非其父容器#rec
• 输入对象错误：jeditable触发编辑状态后，会动态生成临时input输入框替换原展示元素，不能直接给原#23_27元素输入内容
• 回车触发对象错误：不存在id为#r23_27的元素，回车操作需要作用在jeditable生成的临时输入框上

正确测试代码 #

// 触发编辑状态
cy.get('#23_27').dblclick()
// 定位jeditable生成的临时输入框，输入内容后按回车提交
cy.get('#rec input.editable')
  .type('12{enter}')
// 验证修改结果符合预期
cy.get('#23_27').should('have.text', '12')

兼容适配方案 #

如果上述代码仍无法触发提交，可以手动调用表单提交方法，兼容性更强：

cy.get('#23_27').dblclick()
cy.get('#rec input.editable').type('12').then($input => {
  $input.submit()
})
cy.get('#23_27').should('have.text', '12')

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