CODEWITHSUNDEEP
javaselenium-webdriverselenium-chromedriverselenium-firefoxdriver
jperala
jperala

Reputation: 48

How to get drag and drop working with Selenium WebDriver

I am having persistent problem on getting the drag and drop functionality working with Selenium WebDriver.

According the WebDriver documentation the drag/drop should work out of the box with command:

WebElement element = driver.findElement(By.name("source"));
WebElement target = driver.findElement(By.name("target"));
(new Actions(driver)).dragAndDrop(element, target).perform();

However this seems not to be working either with Firefox or Chrome driver.

Below is an example test that tries to use drag and drop functionality on 2 public draggable web sites. Test is parameterized and executed with both FirefoxDriver and ChromeDriver.

package test;

import java.util.ArrayList;
import java.util.Collection;
import java.util.List;

import org.junit.After;
import org.junit.Assert;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.junit.runners.Parameterized;
import org.junit.runners.Parameterized.Parameters;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

@RunWith(Parameterized.class)
public class DragAndDropTest {

    enum Browser {FIREFOX, CHROME};

    private Browser browser;
    private WebDriver driver;

    @Parameters
    public static Collection<Object[]> data() throws Exception {
        List<Object[]> params = new ArrayList<Object[]>();
        params.add(new Object[] { Browser.FIREFOX });
        params.add(new Object[] { Browser.CHROME });
        return params;
    }

    public DragAndDropTest(Browser browser) {
        this.browser = browser;
    }

    @Before
    public void before() {
        switch (browser) {
        case FIREFOX:
            this.driver = new FirefoxDriver();
            break;
        case CHROME:
            this.driver = new ChromeDriver();
        }
    }

    @After
    public void tearDown() {
        driver.quit();
    }

    @Test
    public void test1() {
        By drag = By.id("div1");
        By drop = By.id("div2");
        By expected = By.cssSelector("#div2 #drag1");
        // load page
        driver.get("http://www.w3schools.com/html/html5_draganddrop.asp");
        // wait for draggable element visible
        new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(drag));
        // drag and drop
        new Actions(driver).dragAndDrop(driver.findElement(drag), driver.findElement(drop)).perform();
        // verify results
        Assert.assertEquals("Drag&Drop failed", 1,driver.findElements(expected).size());
    }

    @Test
    public void test2() {
        By drag = By.id("Item1");
        By drop = By.id("Item5");
        By expected = By.cssSelector("#DragContainer5 #Item1");
        // load page
        driver.get("http://www.webreference.com/programming/javascript/mk/column2/index.html");
        // wait for draggable element visible
        new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(drag));
        // drag and drop
        new Actions(driver).dragAndDrop(driver.findElement(drag), driver.findElement(drop)).perform();
        // verify results
        Assert.assertEquals("Drag&Drop failed", 1, driver.findElements(expected).size());
    }
}

Any suggestions/pointers on why the above tests are not working correctly?

Upvotes: 2

Views: 2112

Answers (1)

Grasshopper
Grasshopper

Reputation: 9058

W3C site has HTML5 drag and drop which is currently not supported by Webdriver. Refer to this issue - https://github.com/seleniumhq/selenium-google-code-issue-archive/issues/3604

But in your first test case you should have used this for the drag element. By drag = By.id("drag1");

This is the locator of the image you are dragging.

Upvotes: 2

Related Questions