[KShare] How to use the WebUI.dragAndDropToObject custom keyword successfully?

Product Insights
, , , , , ,
1

How to use the WebUI.dragAndDropToObject custom keyword successfully?

In most cases, the Katalon keyword WebUI.dragAndDropToObject works as intended. There are still some special cases that the keyword cannot cover perfectly. One of the specific scenarios that we can find is HTML5 Drag and Drop with Selenium Webdriver. It happens because Selenium still does not provide official support for testing HTML5 Drag and Drop.

To figure out a solution for the special case above, we observed the behavior of the Web Page when performing the DnD action, simulated the events, and performed action on them.

The scripts below will demonstrate how we simulate said events:

async function simulateDragDrop(sourceNode, destinationNode) {
		    var EVENT_TYPES = {
		        DRAG_START: 'dragstart',
				DRAG_ENTER: 'dragenter',
				DRAG_OVER: 'dragover',
		        DRAG_END: 'dragend',
		        DROP: 'drop'
		    }
		
		    function createCustomEvent(type) {
		        var event = new CustomEvent("CustomEvent")
		        event.initCustomEvent(type, true, true, null)
		        event.dataTransfer = {
					effectAllowed: "move",
					dropEffect: "none",
		            data: {
		            },
					types: [],
		            setData: function(type, val) {console.log("setdata", type);
		                this.data[type] = val;
						this.types.push(type);
		            },
		            getData: function(type) {
		                return this.data[type]
		            }
		        }
		        return event
		    }
		
		    function dispatchEvent(node, type, event) {
                var rect = node.getBoundingClientRect();
				event.clientX = rect.x + (rect.width / 2);
				event.clientY = rect.y + (rect.height / 2);
		        if (node.dispatchEvent) {
		            return node.dispatchEvent(event)
		        }
		        if (node.fireEvent) {
		            return node.fireEvent("on" + type, event)
		        }
		    }

			function delay(timeout) {
				return new Promise((resolve) => setTimeout(resolve, timeout));
			}
			var timeout = 1000
		
		    var dragStartEvent = createCustomEvent(EVENT_TYPES.DRAG_START)
		    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, dragStartEvent)
			await delay(timeout)

		    var dragEnterEvent = createCustomEvent(EVENT_TYPES.DRAG_ENTER)
		    dispatchEvent(destinationNode, EVENT_TYPES.DRAG_ENTER, dragEnterEvent)
			await delay(timeout)

		    var dragOverEvent = createCustomEvent(EVENT_TYPES.DRAG_OVER)
		    dispatchEvent(destinationNode, EVENT_TYPES.DRAG_OVER, dragOverEvent)
			await delay(timeout)
		
		    var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
		    dropEvent.dataTransfer = dragStartEvent.dataTransfer
		    dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)
			await delay(timeout)
		
		    var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
		    dragEndEvent.dataTransfer = dragStartEvent.dataTransfer
		    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
			await delay(timeout)
		}
		''';
	}

We will also be sharing with you the custom keyword below:

DragandDropHelper.groovy (4.3 KB)

And below is the sample scripts for you to check if the provided custom keyword works:

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 static com.kms.katalon.core.testobject.ObjectRepository.findWindowsObject

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.testng.keyword.TestNGBuiltinKeywords as TestNGKW

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 com.kms.katalon.core.windows.keyword.WindowsBuiltinKeywords as Windows

import internal.GlobalVariable as GlobalVariable

import org.openqa.selenium.Keys as Keys

 

WebUI.openBrowser('HTML Drag and Drop API ')

//WebUI.dragAndDropToObject(findTestObject('Page_HTML Drag and Drop API/img_Example_drag1'), findTestObject('Page_HTML Drag and Drop API/div_Example_div2'))

//WebUI.delay(3)

CustomKeywords.'customkeywords.DragandDropHelper.dragAndDrop'(findTestObject('Page_HTML Drag and Drop API/img_Example_drag1'), findTestObject('Page_HTML Drag and Drop API/div_Example_div2'))

Let us know if the custom keywords that we have provided works for you. And if they do, then don’t forget to show us some love by clicking on the like button below :heart:!

And feel free to leave us your feedback so that we could improve our articles in the future!

We also have other topics related to working with custom keywords in Katalon Studio, check them out below :point_down:

:pushpin: How to use the Windows.switchToDesktop() custom keyword to switch window faster?

:pushpin: How to use the WebUI.setText() custom keyword successfully?

:pushpin: How to use the WebUI.dragAndDropToObject custom keyword successfully? → You are here

:pushpin: How to work better with Browser Alerts?

1 Like
2

Thank you Product Support team (@support.squad) as always for this insightful topic. And also a big shout-out to the two individuals below for your contribution to this topic:

Linh Nguyen Thong Tran
Linh Nguyen (@linh.nguyen) - Product Support Manager at Katalon Thong Tran (@thong.tran) - Senior Software Engineer at Katalon
Linh is the Product Support team Manager at Katalon. She spent many years working as an Automation Testing QA before joining Katalon Product Support as a technical support expert. Based on her experiences, she usually provides customers with highly applicable solutions. She now manages her team with a user-centric approach to guarantee customers greater success with Katalon Products. A passionate Katalon developer with a wealth of programming and testing expertise. Thong has been dedicated to providing exceptional enterprise support for the past five years, helping Katalon’s customers achieve their testing goals with ease.
3

This keyword/feature never worked… even the selenium method didn’t work with katalon. However, there’s a trick to make it work which I use and posted sometimes last year. That method still works.
The trick is to initiate a small move after you drag and before you drop.

This is what my code looks like:

Actions actions = new Actions(DriverFactory.getWebDriver())
		
		WebElement sourceEl = WebUiCommonHelper.findWebElement(findTestObject('Page_Target-Maps/tm_dnd source'), 10)
		WebElement targetEl = WebUiCommonHelper.findWebElement(findTestObject('Page_Target-Maps/tm_dnd target'), 10)
		
			
		// react-beautiful-dnd looks for a click, hold, and small movement to initiate a drag event
		actions.clickAndHold(sourceEl).moveByOffset(0, 10).moveToElement(targetEl).release().build().perform();
		
		WebUI.verifyElementPresent(findTestObject('Toasts Messages/toast_Order Updated'), 5);
				

		
		// gets the text from the new updated report type on row 1
		def targetRow = WebUI.getText(findTestObject('Page_Target-Maps/div_tm_list 1'))
			println targetRow

I’ll give the katalon keyword a shot and see if it’s finally working.

1 Like
4

Hi @ashraf.madina ,

Thanks for your feedback.

It is encouraging to know that you have another method to share with the Katalon community, which broadens our knowledge.

It also gives me great pleasure to know that you will try the provided custom keyword above to see if it works for your case and other cases as well.

Additionally, I would like to confirm that the title of the article did not confuse you when you mentioned it.

I’ll give the katalon keyword a shot and see if it’s finally working.

Since the Katalon Product Support team aims to provide custom keywords to handle some special scenarios, like HTML5, this means that rather than calling the keyword “WebUI.dragAndDropToObject”

Please let us know if the article’s title confuses you so we can change it to something clearer.

Best regards,

3 Likes
9

Do you have an idea for a topic that you would like the Product Supoprt team to cover in their next KShare article? Then share them with us by simply fill in the form below :point_down: