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

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.

Source: Read More