Element drag & drop in web testing

In my UI there are boxes in left side and there are files in right side as below

I want to drag and drop that file to 2nd box. for i used below code

WebUI.dragAndDropToObject(findTestObject('Object Repository/Datalocker/Dataset/sampledataset'), findTestObject('Object Repository/Datalocker/Databox/SecondDatabox'))

Test step passes. but file is not moving to the box. Why is that?

Hello Again @rushantha
I created a test case for the next page as an example.

1.STEP :
I first created a project and saved my test status by clicking on the object on the relevant page and the fields I want to drag and drop.

import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import internal.GlobalVariable as GlobalVariable

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI


WebUI.navigateToUrl(‘Droppable | jQuery UI’)

WebUI.click(findTestObject(‘Object Repository/DENEME/Page_Droppable jQuery UI/p_Drag me to my target’))

WebUI.click(findTestObject(‘Object Repository/DENEME/Page_Droppable jQuery UI/div_Drop here’))

2.STEP :
Then I made the following two lines of code for the fields I’m going to drag and drop into one line below, and removed those two clicks.


WebUI.navigateToUrl(‘Droppable | jQuery UI’)

WebUI.dragAndDropToObject (findTestObject (‘Object Repository/DENEME/Page_Droppable jQuery UI/p_Drag me to my target’) , findTestObject(‘Object Repository/DENEME/Page_Droppable jQuery UI/div_Drop here’))

//Close code
//WebUI.click(findTestObject(‘Object Repository/DENEME/Page_Droppable jQuery UI/p_Drag me to my target’))

//WebUI.click(findTestObject(‘Object Repository/DENEME/Page_Droppable jQuery UI/div_Drop here’))

WebUI.dragAndDropToObject will work.

1 Like

Hi @emine… i guess, in the 2nd step of your code equal to my code. correct me if i’m wrong. The thing is using my code can drag the file. but it is not dropping to the correct place. since to drop the dragged file, mouse cursor should be mid of the that left side box(in manual mode). i can see file dragging when automation script running. but it is not dropping to that box.

Hello @rushantha
If you tell me a sample web address, I can help you upload files with drag and drop.

1 Like

Hi there… actually i’m happy to share the website link.but the thing is , that is the company website. Without getting permission i can’t share it. and also you cant access the website without credentials.

Hello of course I did not want you to share your project. If you find a website with the same functionality, please forward it. I would like to help.

Hi @emine
I’ll try to find out similar website or permission for trial account… :slightly_smiling_face:

1 Like

Hello everyone

I’m glad to let you know that Katalon Studio 7.5.1 supports a new WebUI keyword to upload files by drag-and-drop.

Katalon Studio 7.5.1 includes various new features and enhancements. For more information, please refer to the release notes.

Happy Testing


1 Like