Transcripted Summary

In the last example for this chapter I want to focus on automating a drag and drop functionality.

From the homepage of the test application I will select the “Drag and Drop option”.



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”).

  1. I'm going to start out by requiring Selenium WebDriver

    require "selenium-webdriver"
    
  2. Then on line three I will create a new instance of WebDriver

    driver = Selenium::WebDriver.for :chrome
    
  3. 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.

  1. 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”.

  1. 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.

  1. 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



© 2021 Applitools. All rights reserved. Terms and Conditions Privacy Policy GDPR