Element does not move within canvas

Question

I am tyring to move element within canvas but somehow it is not happening.

Code I tried :

        Actions actions = new Actions(driver);
        actions.moveToElement(flowCanvas, 434, 177);
        actions.clickAndHold();
        actions.moveToElement(flowCanvas, 592 , 373);
        actions.release();
        actions.perform();

My xpath :

   @FindBy(xpath = "//div[@id='diagramDiv']//canvas")
    protected WebElement flowCanvas;

URL where I am trying : https://gojs.net/latest/samples/panelLayout.html

I am using selenium webdriver and Java. I am not getting any error in above code but it does not move element as well.

Trying to move following element :

Answer 1

Basically, the problem is with the coordinates which you use and the bowser / web driver implementation which you are using. The W3C specification states that the Action commands offset is from the center of the element. But not all of the web driver implemntations are following this. So basically the moveToElement x and y offsets for gecko driver (Firefox) are calculated from the center of the element in your case from the center of the Canvas but for Chrome Driver (Google Chrome) the cordinates are calulated from the left top corner. So if you want a cross borwser support of drag and drop you will need something like this.

WebDriver driver = getDriver();

driver.get("https://gojs.net/latest/samples/panelLayout.html");
WebElement flowCanvas = driver.findElement(By.xpath("//div[@id='myDiagramDiv']//canvas"));

if(isGoogleChrome()){
    new Actions(driver)
   .moveToElement(flowCanvas, 100, 125).clickAndHold()
   .moveToElement(flowCanvas, 150, 175).release()
   .perform();
} else if (isFireFox()){
    new Actions(driver)
    .moveToElement(flowCanvas, -50, -50).clickAndHold()
    .moveToElement(flowCanvas, 100, 100).release()
    .perform();
}

As you can see for firefox you must use negative values to move mouse from center to the top left element in the canvas and for chrome you need to move mouse a bit down and right.