On my page, I have an element (Drag Source) that is outside the frames and an element (Drop Target) that is inside a frame and in Shadow DOM.
The iframe has the attribute droppable=true, and the body tag inside the iframe has the drop event listener.
A simplified illustration is below:
<html>
<body>
<iframe droppable="true">
<html>
<body ondragover="window.NW.td.dragOverHandler(event.target,event);return false;" ondragleave="window.NW.td.dragLeaveHandler(event.target,event);return false;">
<macroponent>
#shadow-root
<nw-head>
<h1>Drop target</h1>
</nw-head>
</macroponent>
</body>
</html>
</iframe>
<span draggable="true">Drag source</span>
</body>
</html>
I am following the JavaScript solution from JavaScript workaround for drag and drop in Selenium WebDriver post to achieve drag and drop as solutions with Actions class haven't worked on this page.
It seems the drag and drop on the Drop Target is happening with the JS solution provided. I could check this by adding a eventListener in the JS code in the simulateDragDrop function like below and the alert gets displayed.
$.simulateDragDrop = function(elem, options) {
this.options = options;
options.dropTarget.addEventListener('drop',()=>{alert('dropped')});
this.simulateEvent(elem, options);
};
However, the drop event/ondragleave doesn't seem to get invoked as the expected result after drag and drop is not seen on the page. I'm not sure if this is due to the target element being in the Shadow DOM. What is it that may need to be done to get this to work?
from Selenium - Drag and drop on element inside Shadow DOM with JavaScript
No comments:
Post a Comment