Estoy luchando con Cypress por cualquier acción de arrastrar y soltar en un sitio web basado en reacción. Las acciones no fallan en el tablero 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 el menú" (por lo que son visibles para los usuarios), y otro conjunto de divs que son "No en el menú" (por lo que no son visibles para los usuarios ). Lo que quiero hacer es mover las páginas "No en el menú" a la sección "En el menú".
Estos son los elementos del sitio web:
El elemento "arrastrable":
<div data-testid='pages-section-not-in-menu-list' data-rbd-droppable-id="notInMenu" data-rbd-droppable-context-id="0" class="draggable-place"> <div class="page1">Page1</div> <div class="page2">Page2</div> <div class="page3">Page3</div> </div>El área "droppable":
<div data-testid='pages-section-in-menu-list' data-rbd-droppable-id="inMenu" data-rbd-droppable-context-id="0" class="droppable-place"> </div>Mi código:
public dragAndDropPagesToInMenu(): void { const dataTransfer = new DataTransfer(); cy.wait(3000); cy.log("Dragging one page to `In Menu` section"); 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 probé las siguientes soluciones, pero ninguna de ellas ha funcionado hasta ahora:
¿Algunas ideas?
Tengo el mismo problema y encontré esta solución. Espero que funcione para ti:
cypress/support/commands.js Cypress.Commands.add('dragAndDrop', (subject, target) => { Cypress.log({ name: 'DRAGNDROP', message: `Dragging element ${subject} to ${target}`, consoleProps: () => { return { subject: subject, target: target }; } }); const BUTTON_INDEX = 0; const SLOPPY_CLICK_THRESHOLD = 10; cy.get(target) .first() .then($target => { let coordsDrop = $target[0].getBoundingClientRect(); cy.get(subject) .first() .then(subject => { const coordsDrag = subject[0].getBoundingClientRect(); cy.wrap(subject) .trigger('mousedown', { button: BUTTON_INDEX, clientX: coordsDrag.x, clientY: coordsDrag.y, force: true }) .trigger('mousemove', { button: BUTTON_INDEX, clientX: coordsDrag.x + SLOPPY_CLICK_THRESHOLD, clientY: coordsDrag.y, force: true }); cy.get('body') .trigger('mousemove', { button: BUTTON_INDEX, clientX: coordsDrop.x, clientY: coordsDrop.y, force: true }) .trigger('mouseup'); }); }); }); describe('example to drag & drop in react web app', () => { it('drag & drop', () => { cy.visit( 'https://react-beautiful-dnd.netlify.app/iframe.html?id=single-vertical-list--basic' ) cy.get('[data-rbd-draggable-id="1"]').dragAndDrop( '[data-rbd-draggable-id="1"]', '[data-rbd-draggable-id="4"]' ) }) })Esto es lo que funcionó para mí, observe la pequeña espera entre drop y dragend . Esa porción era muy importante:
cy.get('element to be dragged').trigger('dragstart'); cy.get('target where we will drop the element') .trigger('dragenter', { force: true }) .trigger('dragover', { force: true }) .trigger('drop', { force: true }) .wait(50) .trigger('dragend', { force: true });Tuve que usar la fuerza ya que el elemento que estaba arrastrando se vuelve invisible por unos milisegundos. Lo que hizo que la acción del gatillo fallara, por lo que agregar fuerza solucionó eso.