Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get Cypress element from native DOM element?

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)

            })
        }
    })
})

Here i have my code sample where im trying to delete all ever existed events. Thats why i need to .each them to open every single one to delete. But the problem is that .each func returns me as a value of callback (event) the Dom element, but i need an cypress element

I need to do reversed operation to this Get native HTML element in Cypress

Need to get Cypress element

Tags:

2

Answers


  1. 0

    You would be needing Cypress.$() to wrap the DOM element into a JQuery object, post which you can use cy.wrap() to convert it into a Cypress object to perform click or other actions required to delete the event. A sample of the above looks like:

    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);
                const $event = Cypress.$(event);
                cy.wrap($event).click();
                // Add any other actions required to delete the event
            });
        }
    });
});
    Login or Signup to reply.
  2. 0

    To convert a DOM element to a Cypress element, you can use cy.wrap() to wrap the DOM element, thereby converting it to a Cypress object.

    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
     })
    }
  })
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search