Why this Selenium's drag and drop C# code is not working on Chrome?

Question

This doesn\'t work (e.g.: https://www.w3schools.com/html/html5_draganddrop.asp)

var item = WebDriver.FindElement(By.XPath(@\"//img[@src=\'img_w3slogo.gif\']\"),          


        

Answer 1

The only way I was able to get this to work was by using the helper function located here: https://gist.github.com/druska/624501b7209a74040175 and executing javascript (Java example):

 String simulateFunction = "function simulateDragDrop(sourceNode, destinationNode) {\n" +
"    var EVENT_TYPES = {\n" +
"        DRAG_END: 'dragend',\n" +
"        DRAG_START: 'dragstart',\n" +
"        DROP: 'drop'\n" +
"    }\n" +
"\n" +
"    function createCustomEvent(type) {\n" +
"        var event = new CustomEvent(\"CustomEvent\")\n" +
"        event.initCustomEvent(type, true, true, null)\n" +
"        event.dataTransfer = {\n" +
"            data: {\n" +
"            },\n" +
"            setData: function(type, val) {\n" +
"                this.data[type] = val\n" +
"            },\n" +
"            getData: function(type) {\n" +
"                return this.data[type]\n" +
"            }\n" +
"        }\n" +
"        return event\n" +
"    }\n" +
"\n" +
"    function dispatchEvent(node, type, event) {\n" +
"        if (node.dispatchEvent) {\n" +
"            return node.dispatchEvent(event)\n" +
"        }\n" +
"        if (node.fireEvent) {\n" +
"            return node.fireEvent(\"on\" + type, event)\n" +
"        }\n" +
"    }\n" +
"\n" +
"    var event = createCustomEvent(EVENT_TYPES.DRAG_START)\n" +
"    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)\n" +
"\n" +
"    var dropEvent = createCustomEvent(EVENT_TYPES.DROP)\n" +
"    dropEvent.dataTransfer = event.dataTransfer\n" +
"    dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)\n" +
"\n" +
"    var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)\n" +
"    dragEndEvent.dataTransfer = event.dataTransfer\n" +
"    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)\n" +
"} var toDrag =document.getElementById('drag1'); var toDrop = document.getElementById('div2');";

  ((JavascriptExecutor)driver).executeScript(simulateFunction + "simulateDragDrop(toDrag, toDrop);");

Did anyone get this working without javascript executor?

Answer 2

If it helps....

        public static void DragAndDrop(IWebElement element1, IWebElement element2)
    {
        WaitForElementEnabled(element1);
        WaitForElementEnabled(element2);
        var builder = new Actions(_webDriver);
        var dragAndDrop = builder.ClickAndHold(element1).MoveToElement(element2).Release(element2).Build();
        dragAndDrop.Perform();
    }

           public static void WaitForElementEnabled(IWebElement element)
    {
        try { _wait.Until(webDriver => element.Enabled); }
        catch (StaleElementReferenceException) { if (!WaitForNotFoundElement_Enabled(element)) { LogFunctions.WriteError("Enabled - Stale Element Exception"); TakeScreenshot("elementNotFound"); throw; } }
     }