Cypress链式DOM元素操作时JQuery类型不存在then属性报错如何解决

问题原因 #

• Cypress 命令的返回值才是支持.then()链式调用的Cypress链式对象，.then()回调内拿到的参数是JQuery包装的DOM元素对象，不属于Cypress命令对象。
• 第一行代码cy.get('.bp3-datepicker').eq(0)是标准Cypress命令，所以可以直接跟.then()方法；回调中拿到的popup是JQuery对象，调用JQuery原生.find()方法返回的还是JQuery对象，本身没有Cypress的.then()方法，就会抛出对应类型错误。

修复方案 #

方案1：直接操作JQuery对象，无需嵌套then #

如果不需要做异步等待处理，JQuery对象可以直接读取操作，不需要额外包裹.then()：

cy.get('.bp3-datepicker').eq(0).then((popup) => { 
    const item = popup.find('.DayPicker').eq(0)
    // 直接对item执行预期操作即可
})

方案2：用cy.wrap()转换为Cypress对象 #

如果确实需要使用Cypress的异步链式能力处理找到的元素，可以用cy.wrap()把JQuery对象转换为Cypress命令对象，之后就可以正常调用.then()：

cy.get('.bp3-datepicker').eq(0).then((popup) => { 
    cy.wrap(popup).find('.DayPicker').eq(0).then((item) => {
        // 对item执行预期操作
    })
})

方案3：扁平化链式调用，无需嵌套回调 #

该场景完全不需要写嵌套回调，直接把所有选择逻辑拼接为Cypress链式命令即可，写法更简洁：

cy.get('.bp3-datepicker').eq(0)
  .find('.DayPicker').eq(0)
  .then((item) => {
    // 对item执行预期操作
})

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