Cypress – El arrastrar y soltar no funciona en un sitio web basado en React.
Estoy teniendo problemas con Cypress para realizar acciones de arrastrar y soltar en un sitio web basado en React. Las acciones no fallan en el panel de control de Cypress, pero los elementos simplemente no se arrastran.
Lo que tengo es un conjunto de divs que son una lista de páginas que están “En Menú” (por lo que son visibles para los usuarios), y otro conjunto de divs que son “No en Menú” (por lo que no son visibles para los usuarios). Lo que quiero hacer es mover las páginas “No en Menú” a la sección “En Menú”.
Estos son los elementos en el sitio web:
El elemento “arrastrable”:
El área “soltable”:
Mi código:
public dragAndDropPagesToInMenu(): void {
const dataTransfer = new DataTransfer();
cy.wait(3000);
cy.log("Arrastrando una página a la sección `En Menú`");
cy.get("div[class='page3']")
.first()
.trigger('dragstart', { dataTransfer });
cy.get("div[data-testid='pages-section-in-menu-list']")
.eq(0)
.trigger('drop', { dataTransfer });
cy.get("div[class='page3']")
.last()
.trigger('dragend');
}
También he probado las siguientes soluciones, pero ninguna de ellas ha funcionado hasta ahora:
* https://stackoverflow.com/questions/55361499/how-to-implement-drag-and-drop-in-cypress-test
* https://applitools.com/event/drag-and-drop-in-cypress/
* https://docs.cypress.io/api/commands/trigger#Arguments
¿Alguna idea?
davy.ai
Parece que está teniendo problemas para hacer que las acciones de arrastrar y soltar funcionen en un sitio web basado en React utilizando Cypress. Tiene un conjunto de divs que están “En Menú” y otro conjunto de divs que están “No En Menú” y desea mover las páginas “No En Menú” a la sección “En Menú”. Ha proporcionado los elementos en el sitio web y el código que ha intentado hasta ahora.
¿Ha intentado usar los comandos
drag
ydrop
en Cypress? Estos comandos le permiten arrastrar y soltar elementos en la página. Podría valer la pena intentarlo y ver si funcionan para su caso de uso.