javascript 如何从原生DOM元素中获取Cypress元素?

9q78igpj  于 2024-01-05  发布在  Java
关注(0)|答案(3)|浏览(151)

这个问题已经有答案了

Testing removing items from a React controlled list with Cypress(1个回答)
2天前关闭.

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)

            })
        }
    })
})

这里我有我的代码示例,我试图删除所有曾经存在的事件。这就是为什么我需要.each它们打开每一个删除。但问题是,.each func返回我作为回调(事件)Dom元素的值,但我需要一个cypress元素
我需要对这个Get native HTML element in Cypress做反向操作
需要获取Cypress元素

tuwxkamq

tuwxkamq1#

错误是删除操作会导致页面重绘,因此您不能使用.each()
.each()引用元素,但是重绘改变了元素,所以.each()失败。
使用for循环代替。

cy.get(selector).then($els => {
  const count = $els.length
  for (let index = 0; index < count; index++) {
    cy.get(selector)
      .eq(index)
      .then($el => $el[0].remove())
  }
})

字符串

k5ifujac

k5ifujac2#

要将DOM元素转换为Cypress元素,可以使用cy.wrap() Package DOM元素,从而将其转换为Cypress对象。

Cypress.Commands.add('clearScheduleEditor', () => {
cy.get(getBySelector("schedule-editor")).find(".fc-event").should(() => {}).then($events => {
if ($events.length) {
  Cypress._.each($events, (event) => {
    const cypressEvent = cy.wrap(event); // Convert DOM element to Cypress element
    // Now you can use cypressEvent to perform Cypress actions on each event
    console.log(cypressEvent); // Just an example, replace with your delete logic
     })
    }
  })
})

字符串

qncylg1j

qncylg1j3#

您需要 Cypress.$() 将DOM元素 Package 到JQuery对象中,您可以使用 cy.wrap() 将其转换为Cypress对象以执行click或删除事件所需的其他操作。上面的示例如下所示:

Cypress.Commands.add('clearScheduleEditor', () => {
    cy.get(getBySelector("schedule-editor")).find(".fc-event").should(() => {
    }).then($events => {
        if ($events.length) {
            Cypress._.each($events, (event, idx) => {
                console.log(event);
                // const $event = Cypress.$(event);
                // cy.wrap($event).click();
                cy.get(getBySelector("schedule-editor")).find(".fc-event").eq(idx).click();
                // Add any other actions required to delete the event
            });
        }
    });
});

字符串

编辑:

Cypress.Commands.add('clearScheduleEditor', () => {
    cy.get(getBySelector("schedule-editor")).find(".fc-event").should(() => {
    }).then($events => {
        if ($events.length) {
            cy.get(getBySelector("schedule-editor")).find(".fc-event").then(($events) => {
                // Keep clicking and deleting the first event until no events are left
                while ($events.length > 0) {
                    cy.get(getBySelector("schedule-editor")).find(".fc-event").first().click();
                    // Add any other actions required to delete the event

                    // Recheck the events and update the $events variable
                    cy.get(getBySelector("schedule-editor")).find(".fc-event").then(($newEvents) => {
                        $events = $newEvents;
                    });
                }
            });
        }
    });
});

相关问题