Is there any way to drag and drop an element from one frame to another?

user_8773887 0
Viewed 1787

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 :

  1. 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 drangAndDrop(),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.

selenium-webdriver selenium java
3 Answers

After many trails using Actions class, I understood that Actions class cannot be used drag and drop elements across frames. So, I switched to using Robot Class and it worked! 

//Setting up chrome driver
WebDriverManager.getInstance(CHROME).setup();
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();

//Redirecting to the website
driver.get("https://codepen.io/rjsmer/full/vvewWp");

Robot robot = new Robot();
robot.mouseMove(120, 300);
robot.mousePress(InputEvent.BUTTON1_DOWN_MASK);

Thread.sleep(2000);
robot.mouseMove(500, 320);

Thread.sleep(2000);
robot.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);

The sleeps here are important as the commands are being implemented in a quick fashion and it helps the Robot class in pacing its commands accurately.

Depending on the dragFrame you want to drag, you can use the respective coordinates.

user_78309660

I noticed that on running above code, if you move mouse, you can see the dragged element attached to mouse. Try using Robot library and perform this with Robot library mouse actions. See https://www.guru99.com/using-robot-api-selenium.html

I can't test this on my end as Robot library has bug on mac and i am using mac, if you are using windows, you can try:

    Point browserLoc = driver.manage().window().getPosition();

    driver.switchTo().frame(0);

    WebElement frame1 = driver.findElement(By.xpath("//iframe[1]"));        
    Point frameLoc = frame1.getLocation();

    driver.switchTo().frame(frame1);
    Thread.sleep(1000);

    WebElement listElement1 = driver.findElement(By.id("dragFrame-2"));
    Point elementLoc = listElement1.getLocation();
    Dimension elementSize = listElement1.getSize();

    int x = elementLoc.getX() + frameLoc.getX() + browserLoc.getX() + elementSize.getWidth()/2;
    int y = elementLoc.getY() + frameLoc.getY() + browserLoc.getY() + elementSize.getHeight()/2;

    Robot robot = new Robot();
    robot.setAutoDelay(50); 
    robot.mouseMove(x, y);

    Actions action = new Actions(driver);
    action.clickAndHold(listElement1);
    Action a  = action.build();
    a.perform();
    Thread.sleep(1000);

    driver.switchTo().defaultContent();
    driver.switchTo().frame(0);

    WebElement frame2 = driver.findElement(By.xpath("//iframe[2]"));
    Point frameLoc2 = frame2.getLocation();
    driver.switchTo().frame(frame2);

    WebElement frame2Body = driver.findElement(By.xpath("//body")); 
    Point frame2BodyLoc = frame2Body.getLocation();
    Dimension frame2BodySize = frame2Body.getSize();

    int x1 = frame2BodyLoc.getX() + frameLoc2.getX() + browserLoc.getX() + frame2BodySize.getWidth()/2;
    int y1 = frame2BodyLoc.getY() + frameLoc2.getY() + browserLoc.getY() + frame2BodySize.getHeight()/2;

    robot.setAutoDelay(50); 
    robot.mouseMove(x1, y1);

    action.moveToElement(frame2Body);
    action.release();
    a = action.build();
    a.perform();
user_80437340

What if first you identify first frame and use Actions class. There you can do tap and hold. Then switch to another frame, and use move to element. 

// move to first frame
driver.switchTo().frame("frameOne");

// identify element in first frame
WebElement elementOne = driver.findElement(By.xpath(XPATH));

// 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
Actions actions2 = new Actions(driver);
Actions action2 = actions2.moveToElement(elementTwo);
actions2.release(elementTwo);
actions2.build();
action2.perform();
user_28384510
Related