How to drag an element and drop it in another frame?

Question

Hope you doing well,

I'm trying to dragAndDrop an element from FrameOne to FrameTwo but not able to do so.Please help me to understand the concept and what I'm doing wrong here and need to achieve the task by using Actions class only.

Here're the URLs :

https://www.w3schools.com/html/html5_draganddrop.asp Here the element is in a div block I'm able to get all the locaters and do all other actions using Actions class but not able to drag and drop the element.

2.https://codepen.io/rjsmer/full/vvewWp

Here I'm trying to move the element from Frame one to Frame two but I'm not able to do so.

I've tried dragAndDrop(),ClickAndHold() methods,Searched so many solutions, watch videos on the same with no success.

package DragAndDropPracticeFrame;

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

import static io.github.bonigarcia.wdm.DriverManagerType.CHROME;

public class DragDropFrame {
    public static void main(String[] args) throws InterruptedException {
    WebDriverManager.getInstance(CHROME).setup();
    WebDriver driver = new ChromeDriver();
    driver.manage().window().maximize();
    driver.get("https://codepen.io/rjsmer/full/vvewWp");
    driver.switchTo().frame("result");
    System.out.println("Inside First Frame.");
    WebElement frameOne =         
    driver.findElement(By.cssSelector("iframe.dragFrame.dragDrop"));
    driver.switchTo().frame(frameOne);
    System.out.println("Inside Frame 3");
    WebElement elementOne = driver.findElement(By.id("dragFrame-0"));
    System.out.println("First element found: " + elementOne.getText());
    Actions builder = new Actions(driver);
    driver.switchTo().defaultContent();
    System.out.println("Inside main page");
    driver.switchTo().frame("result");
    //System.out.println("Switched to Frame First");
    WebElement frameThree = 
    driver.findElement(By.xpath("//iframe[@class='dropFrame dragDrop']"));
    Action action =
    builder.clickAndHold(elementOne)
    .moveToElement(frameThree)
    .release(frameThree).build();

    //driver.switchTo().frame(frameTwo);
    //System.out.println("Switched to frame 3");
    action.perform();

    //driver.switchTo().defaultContent();
    //builder.perform();

}
}

Another try :

WebDriverManager.getInstance(CHROME).setup();
        WebDriver driver = new ChromeDriver();
        driver.get("https://codepen.io/rjsmer/full/vvewWp");
        driver.switchTo().frame(0);
        WebElement frameOne = driver.findElement(By.xpath("//iframe[@class='dragFrame dragDrop']"));
        WebElement frameTwo = driver.findElement(By.xpath("//iframe[@class='dropFrame dragDrop']"));
        driver.switchTo().frame(frameOne);
// identify element in first frame
        WebElement elementOne = driver.findElement(By.id("dragFrame-0"));

// Use Actions class for tap and hold
        Actions actions = new Actions(driver);
        Actions action = actions.clickAndHold(elementOne);
        actions.build();
        action.perform();

// switch to the second frame
        driver.switchTo().frame(frameTwo);

// move element to another frame
        WebElement elementTwo = driver.findElement(By.xpath("//body[@class='frameBody dropFrameBody']"));
        Actions actions2 = new Actions(driver);
        Actions action2 = actions2.moveToElement(elementTwo);
        actions2.release(elementOne);
        actions2.build();
        action2.perform();

Expected: The element should move to Frame 3 Actual: Nothing happened.

Answer 1

try this out 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.

update

int attempts = 0;
    while(attempts < 2) {
        try {
               //do somthing
        } 
        catch(StaleElementException e) {
        }
        attempts++;
    }

Answer 2

Below Code worked for me. But not sure how much is feasible.(for different browsers/resolutions/devices) I tried it on chrome browser and it worked for me.

        driver.switchTo().frame(0);
        System.out.println("switched to frame-0");
        Actions builder = new Actions(driver);
        WebElement elementOne = driver.findElement(By.id("dragFrame-0"));
        builder.clickAndHold(elementOne);
        builder.moveToElement(elementOne, 10, 10);
        Action action = builder.build();
        action.perform();
        driver.switchTo().defaultContent();
        System.out.println("switched to default content");

        driver.switchTo().frame("result");
        driver.switchTo().frame(1);
        System.out.println("switched to frame-1");
        WebElement ele = driver.findElement(By.xpath("//body[@class='frameBody dropFrameBody']"));
        System.out.println("element found");
        builder.moveToElement(ele).click(ele).release(ele);
        System.out.println("element released");
        builder.release(ele);
        action = builder.build();
        action.perform();
        WebElement ele2 = driver.findElement(By.xpath("//body[@class='frameBody dropFrameBody']/ul/li[@id='dragFrame-0']"));
        boolean b = ele2.isDisplayed();
        System.out.println(b);
        Thread.sleep(6000);