在阴影中拖放柏树 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 中存在问题,原因有两个:
- 不为拖动事件使用
composed: true
标志
- 在 Shadow DOM.
中使用 .closest('html')
returns null
这是一个可以让它工作的补丁:
https://gist.github.com/web-padawan/a124e7cf90b5c252f0731c2d617ab6d7
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 中存在问题,原因有两个:
- 不为拖动事件使用
composed: true
标志 - 在 Shadow DOM. 中使用
.closest('html')
returns null
这是一个可以让它工作的补丁: https://gist.github.com/web-padawan/a124e7cf90b5c252f0731c2d617ab6d7