Handling drag and drop testing for web applications with Katalon Studio

Drag & Drop testing Katalon Studio


Drag and drop is a fairly popular approach in modern websites to improve their overall UX. However, it could be very challenging to implement automation test for drag and drop components.

In this tutorial, we will show how Katalon Studio is used to test the drag and drop feature in a web application.

This tutorial assumes that you are familiar with the tool’s basic features. To have a quick idea of how it works or to review the interface please refer to Kickstart your automation testing using Katalon Studio or Katalon Studio User Guides.

There are different common implementation methods for the drag and drop feature, which each needs to be addressed differently when testing, including:

  • Using pure JavaScript to handle drag and drop with popular JavaScript frameworks like jQuery.
  • Using HTML5 Drag and Drop, which is detailed in w3schools’ HTML Drag and Drop tutorial.

Create automation tests for JavaScript Drag and Drop

Testing the pure JavaScript implemented drag and drop function is quite straightforward with Katalon Studio as its built-in keyword dragAndDropObjectToObject was designed to handle the JavaScript action natively.

For this section, we will use the jQuery Droppable example page as the application under test (AUT).

Droppable Katalon Studio

The example website provides a simple implementation of drag and drop with a draggable object containing the text “Drag me to my target” and a droppable object with the text “Drop here”.

When the draggable object is dragged into the droppable object, the target object’s text will be changed to “Dropped!” like the image below:

Drag & Drop Katalon Studio 2

We are going to test this behavior using Katalon Studio.

  1. Create a Katalon project with the name DragAndDrop.
  2. Open the Object Spy dialog, start a spy object session and navigate to the AUT website at http://jqueryui.com/droppable/#default.
  3. Use the object spy utility to capture both the droppable object and the draggable object mentioned above and import them into the project’s Object Repository. If you do it correctly, there will be 3 test objects as below in Object Repository and add navigation path:

Tests Explorer Katalon Studio

The name of each object is self-explanatory, except for the iframe_demo-frame object which is the parent iframe of both draggable and droppable objects. Now let’s use those captured objects in a test script.

  1. Create a test case named “jQuery Drag And Drop”, open it, then change to Script mode and copy the following test scripts into it:
  2.  Run the test case and you will see that the executed test will pass effortlessly.

Create automation tests for HTML5 Drag and Drop

For this section, we will use the w3school HTML5 Drag and Drop page as the application under test (AUT):

This web page contains a simple implementation of drag and drop which allows you to simply drag the W3Schools.com image to change its container. After the W3Schools image is dragged and dropped to the right rectangle, it appears as below:

We will implement the drag and drop custom keyword for HTML Drag and Drop, then verify the innerHTML of the right rectangle when the drag and drop is completed.

Implementing an automation test for HTML5 Drag and Drop is a bit more complex than the JavaScript version. If you run the test case above to test this drag and drop feature, you will see that the draggable image does not move although the test passes.

This happens because as of the day of this article (May 22, 2017), Selenium still not provide official support for testing HTML5 Drag and Drop. You can follow the related Selenium issue here.

Therefore, as Katalon Studio utilizes Selenium for the automation execution, implementing the automated test for HTML5 Drag and Drop requires a little bit of workaround:

  1. Capture the draggable and droppable objects into the project’s repository like above. If done correctly we have 2 test objects as below:

Test Explorer Katalon Studio

img_drag1 is the identifier of the draggle image object, while div_div2 identifies the destination rectangle element.

2. Create a package inside Keywords with the name dnd.

3. Create a keyword class named DragAndDropHelper and open it. Copy the following scripts to create the custom keyword:

This keyword uses the JavaScript function from https://gist.github.com/druska/624501b7209a74040175 (thanks to Druska) to mimic HTML5 native events to simulate drag and drop for HTML5.

  1. Use our newly created custom keyword. Create a test case with the name HTML5 Drag And Drop, open it then changing to the Script mode and pasting the following Groovy code:

The this sample project could be found here.

Run the test case and you will notice that the W3Schools image is dragged and dropped in the right rectangle successfully.

We hope you enjoy the tutorial, please comment if you have any question or another solution to automate the drag & drop testing. For additional tip & tricks, access Katalon Studio tutorial.

About the Author:

Hieu Mai

Currently working as a senior full-stack developer for KMS Technology, Hieu Mai is one of the developers behind Katalon Studio. With 5 years’ experience in Desktop & Mobile applications development and automation testing, Hieu brings this expertise to develop Katalon Studio.

Contact him at hieumai@kms-technology.com

thumb_up (13) thumb_down (4)

Resolve Git conflicts using Katalon Studio

1. Why do we have Git conflicts? In a source control system like Git, conflicts may occur when two or…

Automation testing of Shadow DOM elements with Katalon Studio

What is Shadow DOM? Shadow DOM is a technique to help web developers to better encapsulate their code. Shadow DOM…

Detecting elements with Xpath in Katalon Studio

Detecting UI elements of the application under test (AUT) is crucial for automation testing since they are the main objects…
Scroll up