Drag and Drop is not working

Product Forums Katalon Studio
,
1

Drag and drop feature is not working.

Even I tried to record for testing, but this feature is not working as you see in below image.

ezgif-4-7e434587d6.gif.d258d895c3aa3168d333b199d17ae816.gif

2

You should try to use a custom keyword instead. This article: https://www.katalon.com/resources-center/tutorials/drag-drop-web-applications-katalon-studio/ provides helpful information to deal with HTML5 controls, which is similar to your case.

3

I tried your steps, but not working.

WebUI.click(findTestObject(‘Page_erwin/div_Collection’))

is clicking the element

WebUI.dragAndDropToObject(findTestObject(‘Page_erwin/div_Collection’), findTestObject(‘New Folder/canvas_This text is displayed’),

FailureHandling.STOP\_ON\_FAILURE)

But this code is not doing the drag and drop.

4

I am able to do the drag and drop from QTP with below line of code.

Browser(“Meet your new browser”).Page(“erwin_6”).WebElement(“Collection”).Drag
Browser(“Meet your new browser”).Page(“erwin_6”).WebElement(“Collection”).Drop 160,180

but not from selenium or Katalon.Any suggestion.

5

Hi there,

My above tutorial indicates you need to write your own custom keyword and use it in your project. Please use that instead of using ‘Drag and Drop to Object’ keyword.

6

In your example, you are dragging an element and dropping it on another.And the first element is moved to new position.

But in my case, it persists at both locations.

Check below once.

Even I tried your steps, but still same issue.

WebUI.dragAndDropToObject(findTestObject(‘New Folder/div_Collection’), findTestObject(‘New Folder/canvas_This text is displayed’))

er.gif

7

Both approaches, html and javascript are not working, it is not showing as failed also in the Katalon code, it is just blinking the element on the screen.

WebUI.dragAndDropToObject(findTestObject(‘New Folder/div_Collection’), findTestObject(‘New Folder/canvas_This text is displayed’))

CustomKeywords.‘dnd.DragAndDropHelper.dragAndDrop’(findTestObject(‘New Folder/div_Collection’), findTestObject(‘New Folder/canvas_This text is displayed’))

And also everytime I am executing complete code, is there any option to execute only part of code as in selenium.

1 Like
8

Hi there,

No my provided article just gives you a sample how you should do drag and drop for special cases, not drag and drop it from one object to other object.

I still see you are using ‘Drag and Drop to Object’ built-in keyword, please try using custom keyword from above project instead:

9

uday kiran reddy said:

Both approaches, html and javascript are not working, it is not showing as failed also in the Katalon code, it is just blinking the element on the screen.

WebUI.dragAndDropToObject(findTestObject(‘New Folder/div_Collection’), findTestObject(‘New Folder/canvas_This text is displayed’))

CustomKeywords.‘dnd.DragAndDropHelper.dragAndDrop’(findTestObject(‘New Folder/div_Collection’), findTestObject(‘New Folder/canvas_This text is displayed’))

And also everytime I am executing complete code, is there any option to execute only part of code as in selenium.

So can you provide me your website so that I can investigate?

10

Actually it is a staging environment and gave only one account to us, if you want I can share my screen whenever you ask.

Thank you very much for your prompt response.

11

I had issues with drag and drop. Neither the built in keyword or customkeyword in github solved my issue. The solution provided in below URL helped me.

https://ynot408.wordpress.com/2011/09/22/drag-and-drop-using-selenium-webdriver/

12

My Screenshot is getting removed , don’t know why, so please see it at below link.

13

Katalon code

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.checkpoint.CheckpointFactory as CheckpointFactory

import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as MobileBuiltInKeywords

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.testcase.TestCaseFactory as TestCaseFactory

import com.kms.katalon.core.testdata.TestData as TestData

import com.kms.katalon.core.testdata.TestDataFactory as TestDataFactory

import com.kms.katalon.core.testobject.ObjectRepository as ObjectRepository

import com.kms.katalon.core.testobject.TestObject as TestObject

import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WSBuiltInKeywords

import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUiBuiltInKeywords

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

import internal.GlobalVariable as GlobalVariable

import org.openqa.selenium.Keys as Keys

WebUI.openBrowser(’’)

WebUI.navigateToUrl(‘https://stagingbeta.myerwin.io/login’)

WebUI.setText(findTestObject(‘Page_erwin/input_username’), ‘ukreddy’)

WebUI.setText(findTestObject(‘Page_erwin/input_password’), ‘–Password–’)

WebUI.click(findTestObject(‘Page_erwin/input_login-form-submit’))

WebUI.click(findTestObject(‘Page_erwin/div_Data Modeler NoSQL’))

WebUI.click(findTestObject(‘Page_erwin/i_material-icon-add’))

WebUI.click(findTestObject(‘Page_erwin/i_icon-mongodb’))

WebUI.click(findTestObject(‘Page_erwin/i_clickable-icon material-icon’))

WebUI.click(findTestObject(‘Page_erwin/div_Collection’))

WebUI.click(findTestObject(‘Page_erwin/div_Field’))

WebUI.dragAndDropToObject(findTestObject(‘Page_erwin/div_Collection’), findTestObject(‘Object Repository/Page_erwin/canvas_This text is displayed’))

---
Last drag and drop not working

14

Hello, have you found any solution to this problem ?
I am still stucked on a similar one

15

Hello,

Anyone got a working solution to this DragnDrop issue?
I’ve tried both (keyword and “DragAndDropToObject”) and same result: step is successfully executed but the drag n drop was not performed. Katalon is lying…

I’ve also tried 20 combinations of grad and dropping different objects… in vain…

16

Hi there,

Pls try the below approach : It worked for me.

WebDriver driver = DriverFactory.getWebDriver();

	WebElement LocatorFrom = driver.findElement(By.xpath("//drag")); // draggable
	WebElement LocatorTo   = driver.findElement(By.xpath("//drop")); // droppable

	 String xto=Integer.toString(LocatorTo.getLocation().x);
	 String yto=Integer.toString(LocatorTo.getLocation().y);

	 ((JavascriptExecutor)driver).executeScript('function simulate(f,c,d,e){var b,a=null;for(b in eventMatchers)if(eventMatchers[b].test(c)){a=b;break}if(!a)return!1;document.createEvent?(b=document.createEvent(a),a==\'HTMLEvents\'?b.initEvent(c,!0,!0):b.initMouseEvent(c,!0,!0,document.defaultView,0,d,e,d,e,!1,!1,!1,!1,0,null),f.dispatchEvent(b)):(a=document.createEventObject(),a.detail=0,a.screenX=d,a.screenY=e,a.clientX=d,a.clientY=e,a.ctrlKey=!1,a.altKey=!1,a.shiftKey=!1,a.metaKey=!1,a.button=1,f.fireEvent(\'on\'+c,a));return!0} var eventMatchers={HTMLEvents:/^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,MouseEvents:/^(?:click|dblclick|mouse(?:down|up|over|move|out))$/}; ' +
			 'simulate(arguments[0],\'mousedown\',0,0); simulate(arguments[0],\'mousemove\',arguments[1],arguments[2]); simulate(arguments[0],\'mouseup\',arguments[1],arguments[2]); ', LocatorFrom,xto,yto);
17

Thanks, I’ve tried that way as well… unfructifying.
I think that Katalon is simply incompetent with Java Ext JS app. Too bad… moving…

18

Can you share the URL?

Edit: Are you able to achieve the drag and drop using Selenium. If so, Please share the code.

If the drag and drop is possible using Selenium, then definitely it is possible via Katalon.

19

I have the same issue identical to David’s above. I have tried Drag and Drop to Object, Drag and Drop by Offset, and the keyword DragAndDropHelper. I was able to get the example in the article above to work. However when I try the same method on my tests I get a false postivie and the Custom Keyword doesnt have any affect that I can see. I don’t think the locators are the issue as I use them for other tests. Is there something else I could be doing wrong or something else I could try?

20

@adam.stephens Agree. None of the options work as desired.
I have also tried the object and the keyword which was suggested but both options return false positive.
The closer call is the keyword but it doesn’t drop on the desired locator/position.
Katalon developers @Zarashima @duyluong have to take this as a bug and work on a fix.