Selenium WebDriver: Perform a drag and drop

If your browser supports advanced user interactions like drag and drop, you can use the Actions class to imitate this behaviour.

Drag and Drop

This is an interactive demo. Drag and drop the small square into the large square. 

Below you will find an example detailing how to drag one element to another:

[C#] Solution 1

  [Test]
  public void draganddrop()
  {
   driver.Navigate().GoToUrl("http://testautomationengineer.blogspot.com/2013/11/selenium-webdriver-perform-drag-and-drop.html");
   
   IWebElement source = driver.FindElement(By.Id("draggable"));
   IWebElement target = driver.FindElement(By.Id("droppable"));
   
   Actions builder = new Actions(driver);
    builder.DragAndDrop(source, target);
    builder.Build().Perform();

    Assert.That(dragAndDropIsComplete());
  }
  
  private bool dragAndDropIsComplete()
  {
   return driver.FindElement(By.ClassName("drag-and-drop-complete")).Displayed;
  }

[C#] Solution 2

  [Test]
  public void draganddrop()
  {
   driver.Navigate().GoToUrl("http://testautomationengineer.blogspot.com/2013/11/selenium-webdriver-perform-drag-and-drop.html");
   
   IWebElement source = driver.FindElement(By.Id("draggable"));
   IWebElement target = driver.FindElement(By.Id("droppable"));
   
   Actions builder = new Actions(driver);
          builder.ClickAndHold(source);
          builder.MoveToElement(target);
          builder.Release(target);
          builder.Build().Perform();
    
   Assert.That(dragAndDropIsComplete());
  }
  
  private bool dragAndDropIsComplete()
  {
   return driver.FindElement(By.ClassName("drag-and-drop-complete")).Displayed;
  }

Tips:

• Ensure native events are enabled
• Maximise your browser windows before you perform a drag and drop

Reference: 

DragAndDrop

Performs a drag-and-drop operation from one element to another.

ClickAndHold

Clicks and holds the mouse button down on the specified element.

MoveToElement

Moves the mouse to the specified element.

Selenium WebDriver: Handling multiple windows

When testing web applications you may come across a few situations when you will need to handle multiple windows.

A common example of this could be clicking on a hyper-link which subsequently opens a new web-page in another window.

In some cases this may be a problem because Selenium WebDriver does not automatically switch to the new window.

Link
Visit my blog testautomationengineer.blogspot.co.uk

Below you will find an example detailing how to handle multiple windows:

[C#]

        [Test]
        public void OpenLinkInANewWindowThenSwitchToNewWindow()
        {
         driver.Navigate().GoToUrl("http://testautomationengineer.blogspot.com/2013/11/webdriver-handling-multiple-windows.html");

         
         // get the current windows handle
         string oldWindow = driver.CurrentWindowHandle;
         string newWindow = null;
         
         // open a link in a new window
         IWebElement element = driver.FindElement(By.Id("visitMyBlog"));
         element.SendKeys(Keys.Shift + Keys.Return);
         
         // wait for the new window
         WebDriverWait wait = new WebDriverWait(driver, new TimeSpan(0,0,5));
         wait.Until((d) => driver.WindowHandles.Count==2);
            
   // get the new window handle         
         var windowHandles = driver.WindowHandles;
         ReadOnlyCollection<string> windows = new ReadOnlyCollection<string>(windowHandles);
         foreach (string window in windows)
         {
          if(window != oldWindow)
          {
           newWindow = window;
          }
         }
         
         // switch to the new window
         driver.SwitchTo().Window(newWindow);
        }

Tips:

• It is just as useful to keep track of your original window, as it is to keep track of your new window.
• Each window in Selenium WebDriver has a unique handle identifier; this allows you to differentiate windows.
• There may be a delay opening the new window, to avoid problems in this area wait for the count of window handles to increase.

Reference:

CurrentWindowHandle

Gets the current window handle, which is an opaque handle to this window that uniquely identifies it within this driver instance.

WindowHandles

Gets the window handles of open browser windows.

I finally have something to say

Who am I?
Hi, my name is Peter Yinusa and I am currently working as a QA and Test Automation Engineer.

Why blog?
I decided to start this blog to share my journey with the rest of the software testing community.

What topics will I be covering?
I will be covering a broad range of testing-related topics of varying technical difficulty, such as (but not limited to):

• Agile testing
• Automation testing
• Open-source technologies
• Success & failure
• Tips & tricks

I will try to create new blog posts as frequent as I can (time permitting).

Disclaimer:
I do not have all the answers, and so that I can learn about some of your solutions to similar problems, please send me your comments.

Please do NOT file bug reports for spelling mistakes found in this blog.

Get in touch
Feel free to get in touch with me directly using the details on my profile.