CODEWITHSUNDEEP
c#seleniumselenium-webdriver
PitAttack76
PitAttack76

Reputation: 2220

Selenium Drag and drop not working in Chrome or Firefox

I use the Drag and drop code below to drag a picture in to a photofield. This works fine in InternetExplorer, but doesn't work in Firefox or Chrome. I don't understand why not.

As you can see in the code below I've tried a lot of different ways to do the drag and drop, but none of them works. The main problem is that the target is not updated after releasing the image. I see the drop happen but no update.

Does anyone have any idea why this is? I'm using C# and the latest Selenium driver 2.39, chrome driver 2.8.

public static void DoDragAndDrop(IWebDriver driver, string dragImageId, string dropFieldId)
    {
        Console.WriteLine("Drag and drop image '{0}' to the editor {1}..", dragImageId, dropFieldId);
        IWebElement dragElement = WebDriverExtensions.TryFindElement(By.Id(dragImageId));
        IWebElement dropElement = WebDriverExtensions.TryFindElement(By.Id(dropFieldId));

        if(dragElement == null)
            Console.WriteLine("dragElement is null");
        if(dropElement == null)
            Console.WriteLine("dropElement is null");

        ((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].scrollIntoView();", dragElement);
        Thread.Sleep(500);

        ((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].scrollIntoView();", dropElement);
        Thread.Sleep(200);

        Console.WriteLine("Drag and drop 1");
        var builder1 = new Actions(driver);
        builder1.MoveToElement(dragElement).ClickAndHold();
        builder1.MoveToElement(dropElement).Build().Perform();
        Thread.Sleep(2000);

        Console.WriteLine("Drag and drop 2");
        var builder2 = new Actions(driver);
        builder2.DragAndDrop(dragElement, dropElement);
        Thread.Sleep(2000);

        Console.WriteLine("Drag and drop 3");
        var builder3 = new Actions(driver);
        builder3.DragAndDrop(dragElement, dropElement).Build().Perform();
        IAction dragAndDrop = builder3.ClickAndHold(dragElement)
            .MoveToElement(dropElement)
            .Release(dropElement)
            .Build();
        dragAndDrop.Perform();
        Thread.Sleep(2000);


        Thread.Sleep(1000);
        Console.WriteLine("Drag and drop succeeded..");
    }

Upvotes: 4

Views: 8515

Answers (4)

HeroFromEarth
HeroFromEarth

Reputation: 93

ChromeDriver doesn't yet support the Actions commands. The Java language binding translates the Actions requests into corresponding mouse events before sending them to ChromeDriver, however there is no guarantee the translated mouse events are completely equivalent to the original Actions request.

Source: Chromium bugtacker

Upvotes: 0

user4966430
user4966430

Reputation:

Tried below sample code with chromedriver:2.15, chrome:v43 and is working fine as expected.

Sample Code:

    System.setProperty("webdriver.chrome.driver","drivers/chromedriver.exe");
    WebDriver  driver = new ChromeDriver();
    driver.manage().timeouts().implicitlyWait(1,TimeUnit.MINUTES);
    driver.get("http://jqueryui.com/droppable");

    driver.switchTo().frame(0);
    WebElement dragElement = driver.findElement(By.id("draggable"));
    WebElement dropElement = driver.findElement(By.id("droppable"));
    Actions builder = new Actions(driver);
    builder.clickAndHold(dragElement).moveToElement(dropElement).release().build().perform();

Upvotes: 2

PitAttack76
PitAttack76

Reputation: 2220

This is how I've got it working in FireFox now. Chrome still fails. The only difference is that I've added offsets in the MoveToElement method, as seen in The Rookies comment.

var builder = new Actions(driver);
        builder.ClickAndHold(dragElement);
        builder.MoveToElement(dropElement, 5, 5);
        builder.Perform();
        Thread.Sleep(250);
        builder.Release(dropElement);
        builder.Perform();

Upvotes: 6

The Rookie
The Rookie

Reputation: 605

For firefox you can use following but it is in ruby 

    panel = driver.find_element(:id, ' (panel around the picture)')
    target = panel.find_element(:xpath, ' ')
    source = panel.find_element(:xpath, ' ')
    driver.action.click_and_hold(source).move_to(target, 400, 150).release(target).perform

Hope it helps

Upvotes: 0

Related Questions