automated testing – Learn how to drag a component and drop it in one other body?

Hope you doing nicely,

I am making an attempt to dragAndDrop a component from FrameOne to FrameTwo however not ready to take action.Please assist me to know the idea and what I am doing mistaken right here and want to attain the duty through the use of Actions class solely.

Right here’re the URLs :

https://www.w3schools.com/html/html5_draganddrop.asp
Right here the component is in a div block I can get all of the locaters and do all different actions utilizing Actions class however not in a position to drag and drop the component.

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

Right here I am making an attempt to maneuver the component from Body one to Body two however I am not ready to take action.

I’ve tried dragAndDrop(),ClickAndHold() strategies,Searched so many options, watch movies on the identical with no success.

package deal 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.Motion;
import org.openqa.selenium.interactions.Actions;

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

public class DragDropFrame {
    public static void essential(String[] args) throws InterruptedException {
    WebDriverManager.getInstance(CHROME).setup();
    WebDriver driver = new ChromeDriver();
    driver.handle().window().maximize();
    driver.get("https://codepen.io/rjsmer/full/vvewWp");
    driver.switchTo().body("outcome");
    System.out.println("Inside First Body.");
    WebElement frameOne =         
    driver.findElement(By.cssSelector("iframe.dragFrame.dragDrop"));
    driver.switchTo().body(frameOne);
    System.out.println("Inside Body 3");
    WebElement elementOne = driver.findElement(By.id("dragFrame-0"));
    System.out.println("First component discovered: " + elementOne.getText());
    Actions builder = new Actions(driver);
    driver.switchTo().defaultContent();
    System.out.println("Inside essential web page");
    driver.switchTo().body("outcome");
    //System.out.println("Switched to Body First");
    WebElement frameThree = 
    driver.findElement(By.xpath("//iframe[@class="dropFrame dragDrop"]"));
    Motion motion =
    builder.clickAndHold(elementOne)
    .moveToElement(frameThree)
    .launch(frameThree).construct();

    //driver.switchTo().body(frameTwo);
    //System.out.println("Switched to border 3");
    motion.carry out();

    //driver.switchTo().defaultContent();
    //builder.carry out();

}
}

One other attempt :

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

// Use Actions class for faucet and maintain
        Actions actions = new Actions(driver);
        Actions motion = actions.clickAndHold(elementOne);
        actions.construct();
        motion.carry out();

// change to the second body
        driver.switchTo().body(frameTwo);

// transfer component to a different body
        WebElement elementTwo = driver.findElement(By.xpath("//physique[@class="frameBody dropFrameBody"]"));
        Actions actions2 = new Actions(driver);
        Actions action2 = actions2.moveToElement(elementTwo);
        actions2.launch(elementOne);
        actions2.construct();
        action2.carry out();

Anticipated: The component ought to transfer to Body 3 Precise: Nothing occurred.