如何从原生DOM元素转换为Cypress元素？

原代码问题 #

你编写的命令中，Cypress._.each遍历得到的是原生DOM元素，无法直接使用Cypress的操作命令，需要将其转换为Cypress可操作的对象。

Cypress.Commands.add('clearScheduleEditor', () => {
    cy.get(getBySelector("schedule-editor")).find(".fc-event").should(() => {
    }).then($events => {
        if ($events.length) {
            Cypress._.each($events, (event) => {
                console.log(event)

            })
        }
    })
})

解决方案 #

可以通过cy.wrap()方法将原生DOM元素包装为Cypress命令对象，以下提供两种实现方式：

方式一：在_.each中转换元素

Cypress.Commands.add('clearScheduleEditor', () => {
    cy.get(getBySelector("schedule-editor")).find(".fc-event").then($events => {
        if ($events.length) {
            Cypress._.each($events, (nativeEventEl) => {
                // 将原生DOM元素转为Cypress可操作对象
                cy.wrap(nativeEventEl)
                  .click() // 打开日程事件弹窗
                  .get(getBySelector("delete-button")) // 替换为实际删除按钮的选择器
                  .click()
                  .get(getBySelector("confirm-delete")) // 替换为实际确认按钮的选择器
                  .click()
            })
        }
    })
})

方式二：使用Cypress原生.each()命令（推荐）

Cypress自带的.each()命令会自动处理异步队列，更贴合Cypress的执行逻辑：

Cypress.Commands.add('clearScheduleEditor', () => {
    cy.get(getBySelector("schedule-editor"))
      .find(".fc-event")
      .each(($eventEl) => {
          // 将jQuery对象转为Cypress可操作对象
          cy.wrap($eventEl)
            .click()
            .get(getBySelector("delete-button"))
            .click()
            .get(getBySelector("confirm-delete"))
            .click()
      })
})

说明 #

• cy.wrap()是Cypress提供的核心方法之一，能将任意值（包括原生DOM、jQuery对象）转换为Cypress命令链的一部分，从而可以继续调用Cypress的操作命令。
• 使用Cypress原生的.each()替代Cypress._.each，可以避免手动处理异步问题，确保每个日程事件的删除操作按顺序执行。

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