Drag and Drop doesn't work inside iFrame with Selenium WebDriver with Java

Question

I am trying to perform drag and drop with Selenium and Java and it is not working.. What can be the cause.. It doesn't give me any error but it is just not happening..

Here is my code.

public class ActionDragDrop {

    public static void main(String[] args) throws InterruptedException {

        WebDriver driver = new ChromeDriver();
        driver.get("https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop");
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        WebElement f=driver.findElement(By.xpath("//*[@id='iframeResult']"));
        driver.switchTo().frame(f);

        WebElement drag = driver.findElement(By.xpath("//*[@id='drag1']"));
        WebElement drop = driver.findElement(By.xpath("//*[@id='div1']"));

        Actions builder = new Actions(driver);
        Actions dragAndDrop = builder.clickAndHold(drag);
        builder.moveToElement(drop);
        builder.release(drop);
        builder.build();
        dragAndDrop.perform();  
    } 
}

Answer 1

You will to switch to iframe first in order to perform drag and drop event:

driver.switchTo().frame(0);                      //Move inside to the frame. 
WebElement body = driver.findElement(By.tagName("body"));
body.click();
WebElement from = driver.findElement(By.xpath("//your xpath")); 
Actions act = new Actions(driver);
act.clickAndHold(from).build().perform();
Thread.sleep(4000);
driver.switchTo().defaultContent();              //Move outside to the frame.

driver.switchTo().frame(1);                     //Move inside to another frame.
WebElement body = driver.findElement(By.tagName("body"));
body.click();
WebElement to = driver.findElement(By.id("guide_RIGHT_SAFETY_rect"));
act.clickAndHold(to).moveToElement(to).release(to).build().perform();
Thread.sleep(2000);
driver.switchTo().defaultContent();                //Move outside to another frame.

Note : Kindly use your xpath, id, classname etc, I have just copied an example. More or less idea should be same.

Answer 2

Try this below code.

As your from and to webelement is located inside the same iframe . First you need to switch inside the iframe.

driver.get("https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop");
driver.manage().window().maximize();

driver.switchTo().frame("iframeResult");   //Move inside to the frame. 
WebElement body = driver.findElement(By.tagName("body"));
body.click();
WebElement from = driver.findElement(By.xpath("//img[@id='drag1']")); 
WebElement to = driver.findElement(By.xpath("//div[@id='div1']"));

Actions act = new Actions(driver);
act.clickAndHold(from).perform();
Thread.sleep(4000);
act.clickAndHold().moveToElement(to).release(to).build().perform();
Thread.sleep(2000);
driver.switchTo().defaultContent();    //Move outside to the frame.

Answer 3

I have done many experiments and finally found the solution as below code in Python.

The failure at DragAndDrop is not caused by iframe.

Just separate every step and perform it.

# drag leftbox and drop on rightbox

actions = ActionChains(driver)
actions.click_and_hold(leftbox).perform()
sleep(4)
actions.move_to_element(rightbox).perform()
sleep(4)
actions.release(rightbox).perform()