CODEWITHSUNDEEP
javaselenium-webdrivergojs
Helping Hands
Helping Hands

Reputation: 5396

Element does not move within canvas

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 :

enter image description here

Upvotes: 3

Views: 1777

Answers (3)

Abhishek
Abhishek

Reputation: 34

I tried moving that object with Sikuli and it worked like a charm. Please check the snippet below.

    Pattern p = new Pattern("Win/AboutScreen/Move.PNG");
    Region r1 = screen.exists(p);
    r1.hover();
    r1.mouseDown(Button.LEFT);
    r1.mouseMove(50, 50);
    r1.mouseUp(Button.LEFT);

You need to save a screenshot at some location and mention the path. hover(); method will find the screen and mouse hover on it. mouseDown(Button.LEFT) will keep the Left click pressed and the last mouserMove(50,50) will move the element to coordinate.

It's very easy to install Sikuli if you are using Maven project then just add one simple dependency and you are done.

Hope this help :)

Upvotes: 0

Babl
Babl

Reputation: 7646

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.

Upvotes: 4

Sanjay Bhimani
Sanjay Bhimani

Reputation: 1603

Try Action and Actions combinations

Actions builder = new Actions(driver);
Action moveAction = builder.moveToElement(flowCanvas,434,177)  
                 .click()
                 .moveByOffset(592, 373) 
                 .doubleClick()
                 .build();
moveAction.perform();

Upvotes: 0

Related Questions