3

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

Helping Hands
  • 5,292
  • 9
  • 60
  • 127
  • What coordinate system are those numbers (offsetX and offsetY) supposed to be in? The X values you use seem much too large for manipulating the top-left node of the four nodes in the diagram. – Walter Northwoods Jan 24 '19 at 12:05
  • @WalterNorthwoods - can you please tell how can I get exact co ordinates for that control which I want to move? – Helping Hands Jan 25 '19 at 05:01
  • https://gojs.net/latest/intro/viewport.html describes the coordinate systems within a GoJS Diagram. `myDiagram.nodes.first().location` is in document coordinates; `myDiagram.transformDocToView(myDiagram.nodes.first().location)` produces a point in viewport coordinates. – Walter Northwoods Jan 25 '19 at 21:21

3 Answers3

3

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.

Babl
  • 7,446
  • 26
  • 37
  • Hey thanks a lot for answer. Can you please tell me how you got those co-ordinates for element? I have installed some extension in chrome for x and y but it shows something else as co-ordinates, please check : http://prnt.sc/mf52jk – Helping Hands Feb 01 '19 at 09:21
  • Definitely, the coordinates from the tool are not correct, as the working div is defined as 400 px on 400px so there is no way to have a 502 as any of the coordinates. I'm using the ruler from the Firefox dev tools. But you can get the coordinates for chrome as suggested by executing the `myDiagram.transformDocToView(myDiagram.nodes.first().location)` which will return the top left coordinates for the first node so you can add 5 or 10 px before executing click action to be sure that you click on the node. – Babl Feb 01 '19 at 11:54
  • @Babl - I'm trying to get drag & drop working on a page with 2 canvases, from one canvas to another, and couldn't get the element move out of the first canvas. Any idea/suggestion? – misha Oct 31 '19 at 13:43
  • @misha will need an example of what you are doing, can't help without code example – Babl Oct 31 '19 at 13:52
0

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();
Sanjay Bhimani
  • 1,593
  • 1
  • 15
  • 29
0

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 :)

Abhishek
  • 34
  • 3