Chapter 3.5 - Drag and Drop

After being navigated to this page I see that there are instructions to drag the image into the box. So, clicking on this selenium image, I can go ahead and drag that and drop into the box.

Let's start automating a test for this functionality.

# Drag and Drop Test Example Code

require "selenium-webdriver"

driver = Selenium::WebDriver.for :chrome

driver.navigate.to "https://formy-project.herokuapp.com/dragdrop"

image = driver.find_element(id: 'image')

box = driver.find_element(id: 'box')

driver.action.drag_and_drop(image,box).perform

While I'm here I'll go ahead and copy this URL since I know that I'll need it in my test. Going back over to Atom I create a new test file (“drag_drop_test.rb”).

I'm going to start out by requiring Selenium WebDriver
```
require "selenium-webdriver"
```
Then on line three I will create a new instance of WebDriver
```
driver = Selenium::WebDriver.for :chrome
```

And then I will navigate my driver to the drag and drop page

driver.navigate.to "https://formy-project.herokuapp.com/dragdrop"

And now what I want to do is to define the elements that I'm going to use to drag and drop.

So, I'll go back over to the test page and refresh. Once I'm there I will select to inspect the image, since this is what I'll be dragging on to the box, we want to focus on this first. I see that it has an ID of “image” which I'll copy over.

Then I'll define a new variable in my test called “image” and say
```
image = driver.find_element(id: 'image')
```

And then I want to next define the box. And going back over to the web application I see that the box has an ID of “box”.

So, then I can say
```
box = driver.find_element(id: 'box')
```

Now what I want to do is to figure out how to use the drag and drop functionality.

So, I went to the API documentation and I searched for the drag and drop method.

And when I look at the example, I see that this specifying how to do drag and drop one element into another.

There is an element 1 (el1) and element 2 (el2). And in this third line we tell the driver to use an action of drag_and_drop to bring element one onto element two and then perform the action.

So, incorporating that back into my test, I can perform this action
```
driver.action.drag_and_drop(image,box).perform
```

This simple test is complete.

Resources

Add AI to your existing test scripts in minutes!