How to move svg image using selenium element?

Question

This is HTML code before having the element in svg.

After that, I pull a new element from the sidebar into svg and HTML code like that

So I want to move a new element to new position in svg. Example: Element have a position is (328,201) and I want to move to new position is (0,0) in svg. I have tried another way to move the element in svg but not work. Anyone have an idea to perform

WebElement From = driver.findElement(itemListSVG);

act.moveToElement(From, 0, 0).build().perform();


act.click(From).moveToElement(From, 0, 0).build().perform();

Answer 1

What you're doing actually is:

1. Click an item (click)
2. Moving a mouse pointer to that item (moveToElement which accepts the target element as its parameter)

There are no actions defined for dragging and dropping the items whatever they are (svg or other types of elements). You should use one of the following approaches:

1. dragAndDropBy(WebElement source, int xOffset, int yOffset) where you set what you drag and drop and the offset to where you drag and drop
2. Use clickAndHold(WebElement onElement) that would emulate holding your element with a mouse, then moveByOffset(int xOffset, int yOffset) or moveToElement(WebElement toElement) and then release() that would release your mouse button.

Answer 2

Try adding move to element before the click and hold.

        Actions action = new Actions(driver);
        action.MoveToElement(element);
        action.ClickAndHold().MoveByOffset(offsetX, offsetY).Release();
        action.Build().Perform();

Answer 3

As I understood when you are trying to move the element you are getting StaleElementReferenceException. Are you handling that? If no try doing following 1. Use explicit wait 2. Use try catch around the code. If it worked let me know else go for another solution. and use dragAndDropBy(WebElement source, int xOffset, int yOffset) rather that clickAndHold().moveByOffset(x-offset, y-offset).release() To get actual offset manually you can use browser ruler.

Answer 4

It works :D

Actions builder = new Actions(driver);
builder.clickAndHold(driver.findElement(element)).build().perform();
builder.moveToElement(svgGridElement,50,50).build().perform();
builder.release().build().perform();