There is a problem in cypress with drag and drop in shadow dom.
I'm trying to run a drag event in such way:
cy.get(".shadow-app>div>div:nth-child(1)", { includeShadowDom: true }).trigger("dragstart", { dataTransfer2 });
And through .shadow
function. No reaction.
I created an application with two similar lists. https://github.com/mpetrikov/dnd-test
In the first list with real DOM, cypress works properly. In the second list in a shadow DOM, cypress doesn't work. Even a dragstart event doesn't work.
In this file a test with these two attempts. https://github.com/mpetrikov/dnd-test/blob/master/cypress/integration/dnd.js I call a dragover two times because plugin 4teamwork/cypress-drag-drop does the same and it works. Just one dragover doesn't work.
This view after a dragstart in real DOM:
This view after the test (right list in shadow DOM):
There is a problem in the plugin caused by two issues:
composed: true
flag for drag events.closest('html')
returns null inside Shadow DOM.Here is a patch which makes it work: https://gist.github.com/web-padawan/a124e7cf90b5c252f0731c2d617ab6d7