在阴影中拖放柏树 dom

Drag and drop with cypress in shadow dom

cypress 中存在拖放阴影问题 dom。

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

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

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

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

第一个真正的 DOM 列表中,cypress 工作正常。 在阴影 DOM 的第二个列表中,cypress 不起作用。即使是 dragstart 事件也不起作用。

在此文件中进行了这两次尝试的测试。 https://github.com/mpetrikov/dnd-test/blob/master/cypress/integration/dnd.js 我调用了 dragover 两次,因为插件 4teamwork/cypress-drag-drop 的作用相同并且有效。一个拖车不行。


实际拖动开始后的视图 DOM:


测试后的这个视图(阴影右侧列表DOM):

plugin 中存在问题,原因有两个:

  1. 不为拖动事件使用 composed: true 标志
  2. 在 Shadow DOM.
  3. 中使用 .closest('html') returns null

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