I encountered an issue in cypress with drag and drop functionality within the shadow dom.
My attempt to perform a drag event is as follows:
cy.get(".shadow-app>div>div:nth-child(1)", { includeShadowDom: true }).trigger("dragstart", { dataTransfer2 });
However, using the .shadow function did not trigger any response.
I developed an application featuring two similar lists. https://github.com/mpetrikov/dnd-test
The first list, operating with real DOM, works correctly with Cypress. On the other hand, the second list nested within a shadow DOM does not work at all. Not even the dragstart event functions as expected.
There is a test file showcasing these attempts available here: https://github.com/mpetrikov/dnd-test/blob/master/cypress/integration/dnd.js I had to call the dragover event twice due to the plugin 4teamwork/cypress-drag-drop requiring it for proper functionality. One dragover alone did not suffice.
This is the view after performing a dragstart event on the real DOM:
And this is the result after conducting the test on the right list within the shadow DOM: