How do I use Selenium to drag and drop drawing elements into a canvas?

Question

I have an element with an id which I need to select, then drag and drop into a drawing canvas. How do I do this?

The element is outside the canvas and I need to draw it inside the canvas.

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

Answer 1

You can try using Actions for drag and drop actions.

Actions dragdrop = new Actions(driver);
WebElement object1 = driver.findElement(By.xpath("XPATH1"));
WebElement canvas = driver.findElement(By.xpath("XPATH2"));
dragdrop.moveToElement(object1).clickandHold();
dragdrop.moveToElement(canvas);
dragdrop.release();
dragdrop.build().perform();

You can also use the following code if the above one does not work.

Actions dragdrop = new Actions(driver);
WebElement object1 = driver.findElement(By.xpath("XPATH1"));
WebElement canvas = driver.findElement(By.xpath("XPATH2"));
dragdrop.dragAndDrop(object1, canvas);
dragdrop.build().perform();

There is another type of dragandDrop(source, x-offset, y-offset) action which accepts offsets arguments. You may also try using it if these solutions does not work.