How to perform drag and drop using selenium-webdriver when target and destination element are in different frames?

Question

I have to drag an image and drop it into a CQ5 component. The image and component are in different frames.

Here is the code which did not work as webelement destinationcould not be found when the target's frame was active.

new Actions(driver).dragAndDrop(target, destination).perform();

I have also tried to switch frame in between action as:

    Actions builder = new Actions(driver);
    Actions action = builder.clickAndHold(target);
    driver.switchTo().frame("newFrame"); //switching frames
    builder.moveToElement(destination);
    builder.release(destination);
    builder.build();
    action.perform();

This is did not work either. Then, I tried moving the image by offset

new Actions(driver).dragAndDropBy(target,  x, y).perform(); // x and y 

This moved the image but component did not capture it, probably becuase action was too fast. Is there any way such drag drop can be done?

Thanks in advance.

Thuja

Not going to add as an answer as it doesn't solve you're problem, but I've had the same trouble trying to get Selenium working from within CQ. I've found that rather than trying to use drag & drop, there are times within CQ that you can instead double-click. For example when adding a component, double-clicking on the parsys will bring you to the list of components that you can add (within the same frame). Choosing a component here will bring you directly to the edit dialog for this new component. Can the same be done for the Content Finder perhaps? – Copyist

Answer 1

You need to break it into two parts.

// grab your element
Actions builder = new Actions(driver);
Actions action = builder.clickAndHold(target);
builder.build();
action.perform();

// switch to the frame (you havent told webdriver to un-grab
driver.switchTo().frame("newFrame"); //switching frames

// move and drop
Actions builder = new Actions(driver);
Actions action = builder.moveToElement(destination);
builder.release(destination);
builder.build();
action.perform();

Menstrual

Have you actually tried this code? How can an element be shared between two different actions? – Thuja

Answer 2

It seems there are some issues with selenium / webdriver drag and drop. I have submitted a defect with selenium folks, http://code.google.com/p/selenium/issues/detail?id=4420

Hopefully we will get some positive response.

Shillong

Answer 3

Is anybody found solution for Adobe CQ 5.5?

I'm facing to the same problem with adobe CQ 5.5, I was trying multiple different ways, I can get image to drop zone, but once it is there the image still seems not active and dropping it not make sense. I figured out that it is because the mouse pointer is not moving with image that is why dropping not make sense. I added code to move mouse to the drop zone, but looks like commands is working separate so still not able to drop, please any suggestion.

Here is my code (not working on CQ 5.5)

String handle = driver.getWindowHandle(); // for main window

// Switch to Window to be able select image

driver.switchTo().window(handle);
WebElement dragble = driver.findElement(By.xpath("//xpath"));

Actions builder = new Actions(driver);
builder.clickAndHold(dragble);
Action action2 = builder.build();
action2.perform();

// Then, switch to iframe

driver.switchTo().frame("cq-cf-frame");
WebElement droppable = driver.findElement(By.cssSelector("#cssSelector of droppable"));

// Robot to point mouse to droppable zone

Point coordinates = driver.findElement(By.cssSelector("#cssSelector of droppable")).getLocation();
Robot robot = new Robot();

// Find location for droppable element

int x = driver.findElement(By.cssSelector("#ext-comp-1271")).getLocation().getX();
int y = driver.findElement(By.cssSelector("#ext-comp-1271")).getLocation().getY();

// Move dragble to droppable

builder = new Actions(driver);
builder.moveByOffset(x,y).perform().
builder.build();
builder.release();
robot.mouseMove(coordinates.getX(),coordinates.getY()+120);
builder.release(droppable).perform();

Pharmaceutics

Answer 4

I had the same prb as you. I can't darg and drop two elements from one frame to anther. the ansers uppers are correct but from selenium 3 this solution doesn't works any more. The workarrown is to move source element (after clickAndHol) to the positon 0,0 and then to move it under the second frame. for example 150,150.

 Actions builder = new Actions(driver);
 // switsh to the source frame
 driver.switchTo().frame("sourceFrame");
 // take the element with mouse 
 builder.clickAndHold(sourceElt).build().perfom();
 // move mouse to the top of the source frame
 builder.moveToElement(sourceElt, 0, 0 ).build().perfom();
 // move the mouse under the target frame (specific to your case)
 builder.moveToElement(sourceElt, 150,200).build().perfom();
 // switsh to the target frame
 driver.switchTo().frame("targetFrame");
 builder.moveToElement(targetElt).build().perform();
 builder.release(target).build().perform();      

hope I helps you too.

Impassible

Answer 5

String source = "xpath_of_source";
String destination = "xpath_of_destination";

// grab your element
Actions builder = new Actions(driver);
Actions action = builder.clickAndHold(driver.findElement(By.xpath(source)));
builder.build();
action.perform();

// switch to the frame
driver.switchTo().frame("newFrame"); //switching frames

// move and drop
builder = new Actions(driver);
action = builder.moveToElement(driver.findElement(By.xpath(destination)));
builder.release(driver.findElement(By.xpath(destination)));
builder.build();
action.perform();

Hear

Answer 6

This code works on CQ 5.5

driver.switchTo().defaultContent();

Actions builder = new Actions(driver);
builder.clickAndHold(target);
Action action = builder.build();
action.perform();

driver.switchTo().frame("cq-cf-frame");
builder.moveToElement(destination);
builder.release(destination);     
action = builder.build();
action.perform();

Carisa

Answer 7

The above posted solutions did not work for me under CQ 5.5 and CQ 5.6

This works:

    Actions builder = new Actions(driver);
    builder.clickAndHold(sideKickComponent);
    Action action = builder.build();
    action.perform();

    driver.switchTo().frame("cq-cf-frame");
    builder = new Actions(driver);
    builder.moveToElement(destination).perform();
    builder.build();
    builder.release();
    builder.release(destination).perform();     

This method allows convenient component placement:

public void addComponentByDragAndDrop(String sideKickComponentName, WebElement destination){
        driver.switchTo().defaultContent();
        WebElement sidekick = driver.findElement(By.id("cq-sk"));
        List<WebElement> components =sidekick.findElements(By.tagName("button"));
        WebElement sideKickComponent = null;
        for (WebElement webElement : components) {
            if (webElement.getText().equals(sideKickComponentName)) {
                sideKickComponent = webElement;
                break;
            }
        }
        if (sideKickComponent == null) {
            fail("SideKick component with the name: "+sideKickComponentName + " was not found.");
        }
        Actions builder = new Actions(driver);
        builder.clickAndHold(sideKickComponent);
        Action action = builder.build();
        action.perform();

        driver.switchTo().frame(Consts.CQ_MAIN_FRAME);
        builder = new Actions(driver);
        builder.moveToElement(destination).perform();
        builder.build();
        builder.release();
        builder.release(destination).perform();     
    }

Bangkok

Answer 8

The code below works, hope it helps:

WebElement dragElement = (WebElement) elements.get(sourceElement);
Actions builder = new Actions(driver);          
Actions action = builder.clickAndHold(dragElement);
action.build().perform();
driver.switchTo().frame("cq-cf-frame");   
WebElement dropElement = driver.findElement(By.id("ext-comp-1411"));
builder.moveToElement(dropElement).build().perform();
//click the destination 
builder.click(dropElement).build().perform();
//back to main page to release the hold mouse
driver.switchTo().defaultContent();
builder.release(dragElement).build().perform();

Karli

Answer 9

To do a drag and drop from an iframe to another, you need to reference all your actions in the iframe of the source web element. To do this, you should get the parent of the target iframe and manipulate using it, i.e. CqFrameParent which is a div that has the target iframe.

Since the source and target belongs to a single iframe, no need to do the switching of iframes to do this. 

builder.moveElement(CqFrameParent(), targetX, targetY).build().perform();
builder.release().build().perform();

Ewell

Answer 10

Create object of actions class

Actions act=new Actions(driver);

Find element xpath which we need to drag

WebElement drag=driver.findElement(By.xpath("put x path"));

Find element xpath where we need to drop

WebElement drop=driver.findElement(By.xpath("put x path"));

Drag element to destination

act.dragAndDrop(drag, drop).build().perform();

To use drag and drop in CQ use double click function first and put any component then try above method.

Gentlewoman

Answer 11

Selenium webdriver is providing drag and drop function. Try this

WebElement element = driver.findElement(By.name("source"));
WebElement target = driver.findElement(By.name("target"));

(new Actions(driver)).dragAndDrop(element, target).perform(); 

Epicureanism