在 shadow dom 中使用 cypress 拖放

Question

cypress 在 shadow dom 中拖放存在问题。

我正在尝试以这种方式运行拖动事件：

cy.get(".shadow-app>div>div:nth-child(1)", {
  includeShadowDom: true
}).trigger("dragstart", { dataTransfer2 });

并通过.shadow 函数。没有反应。

我创建了一个包含两个相似列表的应用程序。 https://github.com/mpetrikov/dnd-test

在第一个带有真实 DOM 的列表中，cypress 可以正常工作。 在 shadow DOM 的第二个列表中，cypress 不起作用。即使是 dragstart 事件也不起作用。

在此文件中进行这两次尝试的测试。 https://github.com/mpetrikov/dnd-test/blob/master/cypress/integration/dnd.js 我调用了两次拖动，因为插件 4teamwork/cypress-drag-drop 做同样的事情并且它可以工作。只有一个拖拽是行不通的。

---

在真实 DOM 中拖动启动后的这个视图：

---

测试后的这个视图（shadow DOM中的右列表）：

Answer 1

plugin有问题，由两个问题引起：

1. 不使用composed: true 标记进行拖动事件
2. 使用 .closest('html') 在 Shadow DOM 中返回 null。

这是一个使它工作的补丁： https://gist.github.com/web-padawan/a124e7cf90b5c252f0731c2d617ab6d7