Search code examples
javascriptdrag-and-dropcypressshadow-domreact-dnd

Drag and drop with cypress in shadow dom


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:

enter image description here


This view after the test (right list in shadow DOM):

enter image description here


Solution

  • There is a problem in the plugin caused by two issues:

    1. Not using composed: true flag for drag events
    2. Using .closest('html') returns null inside Shadow DOM.

    Here is a patch which makes it work: https://gist.github.com/web-padawan/a124e7cf90b5c252f0731c2d617ab6d7