How to drag and drop in Selenium webdriver

In this article, we are going to see how we can drag and drop an web element with JQuery UI.  I am using c# with VS 2010.

To drag and drop, first, we have to initiate two web elements which should be draggable and droppable . And then using those two web elements together we can perform an action drag and drop. So initiations will be define by driver finding elements. In code , it will be
private IWebElement draggable;
private IWebElement droppable;
In the test method, we have to declear them
draggable = driver.FindElement(By.Id("draggableIDstring"));//we can use other method like Xpath to find element, for this, see from my old posts.
droppable = driver.FindElement(By.Id("droppableIDstring"));
Then we have to perform a new action with those web elements.
new Actions(driver).DragAndDrop(draggable, droppable).Build().Perform();

In here, Actions initiated by driver, performs(after build) drag & drop.
Note: Be careful of building the new action before perform[.Build()]. Here draggable is source element and droppable is destination element.

I will try to provide more action performing.



  1. How to Drag an Element from one frame to drop into another frame of the same window panel in selenium webdriver using c# language?

    Plz Post Answers

    1. make the element draggable, and droppable using Xpath(relative) finder.(you may use find path plugins for fire bug with firefox). Then you can drag & drop in the with making a new action. For specific code, please mail( me with the site link and proper action steps. I can provide you code in weekends.