Selenium webdriver - drag and drop on Angular/Material design website

Question

I am trying to automate drag and drop event using selenium java webdriver, against website created with Angular/Material design, I have tried countless of ways, but every single one fail, there are no errors, but nothing gets dragged and dropped.

Here is my sample code:

Website used for test is:

https://smnbbrv.github.io/angular-sortablejs-demo/multiple-lists

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class Playground
{
    public static void main(String[] args)
    {
        WebDriver driver = new ChromeDriver();
        driver.get("https://smnbbrv.github.io/angular-sortablejs-demo/multiple-lists");

        WebElement draggable = driver.findElement(By.xpath("/html/body/app-root/div/app-multiple-lists/div[1]/div[1]/ul/li[2]"));
        WebElement dropable = driver.findElement(By.xpath("/html/body/app-root/div/app-multiple-lists/div[1]/div[2]"));

        // DRAW BORDERS AROUND TO MAKE SURE WE SELECT CORRECT OBJECTS
        drawBorder(driver, "/html/body/app-root/div/app-multiple-lists/div[1]/div[1]/ul/li[2]");
        drawBorder(driver, "/html/body/app-root/div/app-multiple-lists/div[1]/div[2]");

        // TRY USING SELENIUMS ACTION CLASS
        Actions actions = new Actions(driver);
        actions.clickAndHold(draggable).moveToElement(dropable).release().build().perform();

        // TRY AGAIN USING JAVA SCRIPT 
        dragAndDrop(driver, draggable, dropable);
    }

    public static void drawBorder(WebDriver driver, String xpath)
    {
        WebElement element_node = driver.findElement(By.xpath(xpath));
        JavascriptExecutor jse = (JavascriptExecutor) driver;
        jse.executeScript("arguments[0].style.border='3px solid red'", element_node);
    }

    public static void dragAndDrop(WebDriver driver, WebElement from, WebElement to)
    {
        JavascriptExecutor js = (JavascriptExecutor) driver;

        js.executeScript("function createEvent(typeOfEvent) {\n" + "var event =document.createEvent(\"CustomEvent\");\n"
                + "event.initCustomEvent(typeOfEvent,true, true, null);\n" + "event.dataTransfer = {\n" + "data: {},\n"
                + "setData: function (key, value) {\n" + "this.data[key] = value;\n" + "},\n"
                + "getData: function (key) {\n" + "return this.data[key];\n" + "}\n" + "};\n" + "return event;\n"
                + "}\n" + "\n" + "function dispatchEvent(element, event,transferData) {\n"
                + "if (transferData !== undefined) {\n" + "event.dataTransfer = transferData;\n" + "}\n"
                + "if (element.dispatchEvent) {\n" + "element.dispatchEvent(event);\n"
                + "} else if (element.fireEvent) {\n" + "element.fireEvent(\"on\" + event.type, event);\n" + "}\n"
                + "}\n" + "\n" + "function simulateHTML5DragAndDrop(element, destination) {\n"
                + "var dragStartEvent =createEvent('dragstart');\n" + "dispatchEvent(element, dragStartEvent);\n"
                + "var dropEvent = createEvent('drop');\n"
                + "dispatchEvent(destination, dropEvent,dragStartEvent.dataTransfer);\n"
                + "var dragEndEvent = createEvent('dragend');\n"
                + "dispatchEvent(element, dragEndEvent,dropEvent.dataTransfer);\n" + "}\n" + "\n"
                + "var source = arguments[0];\n" + "var destination = arguments[1];\n"
                + "simulateHTML5DragAndDrop(source,destination);", from, to);
    }
}

As you can see I used two options, first using Selenium`s Actions class, and second executing JavaScript to perform drag and drop, but nothing works.

Is there any solution to make it work? Thanks

Answer 1

Here have an 'hard' but possible workaround: https://stackoverflow.com/a/49089682/10413416

If this even don't help, worst case scenario is Sikuli

https://github.com/sikuli/sikuli-api/blob/master/examples/src/main/java/org/sikuli/api/examples/experimental/DragDropExample.java

Note: it interacts with the window of browser.