The WebUI Drag and Drop keyword is not working properly on different screen sizes or resolutions.
The same test works on one screen resolution but fails on others. Has anyone faced this issue in Katalon Studio?
Any suggestions or alternative approaches to handle drag and drop across different screens would be helpful.
We need more information from you.
Please show the execution log with the diagnostic message and the “Root Cause” information contained.
Please show the source of your Test Case script, with highliging the line that causes the error.
Please explain Which keyword do you use to impletement “drag and drop”?
Please explain how your test specifies (or changes) the screen size or resolutions.
Please tell us Which version of Katalo Studio do you use?
Which type of browser do you use? Chrome, Edge, Firefox?
Do you work on Windows? Mac? or Linux?
1. Execution Log & Root Cause
I have attached the execution log along with the diagnostic messages.
However, there is no explicit “Root Cause” mentioned in the log.
The failure occurs when executing the drag and drop step, where the element is not being dropped successfully on different screen resolutions.
2. Test Case Script (Error Highlighted)
Below is the keyword implementation used in my test case.
The issue occurs at the WebUI.dragAndDropToObject() line:
WebUI.dragAndDropToObject(
findTestObject('Drag and Drop/Page_Droppable jQuery UI/div_draggable'),
findTestObject('Drag and Drop/Page_Droppable jQuery UI/div_droppable')
)
WebUI.closeBrowser()
3. Keyword Used for Drag and Drop
I am using the following built-in Katalon keyword to implement drag and drop:
WebUI.dragAndDropToObject()4. Screen Size / Resolution Handling
Currently, I am not explicitly setting or changing the screen size or browser resolution in the test script.
The issue happens on different screen sizes, which is why the drag-and-drop action behaves inconsistently.
5. Katalon Studio Version
I am using Katalon Studio (latest stable version).
(Exact version can be shared if required.)
6. Browser Details
7. Operating System
8. Reference
I followed the official Katalon documentation related to Drag and Drop keywords:
WebUI.dragAndDropToObject
WebUI Drag And Drop By Offset
Despite this, the drag-and-drop action does not work reliably across different screen resolutions.
Where is the log attached? I can not find it.
I do not understand this sentence. Especially, “drop on different screen resolutions” — it does not make sense to me.
Please insert a line of debug print that shows the current view port width and hight of browser window.
For example,
import com.kms.katalon.core.webui.driver.DriverFactory;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
// ... (your driver initialization code)
WebDriver driver = DriverFactory.getWebDriver()
// Get the entire window dimensions
Dimension windowSize = driver.manage().window().getSize();
int windowWidth = windowSize.getWidth();
int windowHeight = windowSize.getHeight();
System.out.println("Window Width: " + windowWidth);
System.out.println("Window Height: " + windowHeight);
Then run your test again.
What value do you find in the 2 cases: successful case and failing case.
I would suggest you to ensure that the target elements (div_draggable and div_droppable) are present and visible just before calling the drag-n-drop keyword. To do that, you should insert a few lines before calling the drag&drop keyword.
The isserted lines would reveal something informative.
Do you have 2 machines with different screen sizes, and run a single test on each of them?
I mean, I am curious how you could create 2 environments with different screen sizes without calling WebUI.setViewPortSize(w,h) explicitly.
Can you tell it to us?
The following test case script will show the width and height in pixel of the screen device of the runtime environment.
import java.awt.Dimension;
import java.awt.Toolkit;
Toolkit toolkit = Toolkit.getDefaultToolkit();
Dimension screenSize = toolkit.getScreenSize();
int width = (int) screenSize.getWidth();
int height = (int) screenSize.getHeight();
System.out.println("screen width: " + width + " pixel");
System.out.println("screen height: " + height + " pixel");
For example, on my mac Book Air, this gave me :
2026-01-06 21:58:07.957 DEBUG testcase.getScreenSize - 5: out.println("screen width: " + width + " pixel")
screen width: 1440 pixel
2026-01-06 21:58:08.036 DEBUG testcase.getScreenSize - 6: out.println("screen height: " + height + " pixel")
screen height: 900 pixel
Please try running this on your machines and tell us the exact pixel size. This information will let us understand your cases with concrete figures.
Thanks for the suggestion.
I already tried this approach by explicitly waiting for both the draggable and droppable elements to be visible before performing the drag-and-drop action. However, the issue still persists and the drag-and-drop does not work.
Below is the code I used:
// Make sure the 2 elements are visible and manipulatable
WebUI.waitForElementVisible(
findTestObject('Drag and Drop/Page_Droppable jQuery UI/div_draggable'),
5,
FailureHandling.STOP_ON_FAILURE
)
WebUI.waitForElementVisible(
findTestObject('Drag and Drop/Page_Droppable jQuery UI/div_droppable'),
5,
FailureHandling.STOP_ON_FAILURE
)
WebUI.dragAndDropToObject(
findTestObject('Drag and Drop/Page_Droppable jQuery UI/div_draggable'),
findTestObject('Drag and Drop/Page_Droppable jQuery UI/div_droppable')
)
WebUI.closeBrowser()
Even after inserting these lines, the drag-and-drop action is still not working.
Please let me know if there are any other checks or alternative approaches I should try.
“This email and any attachments are confidential and may also be privileged. If you are not the addressee, do not disclose, copy, circulate or in any other way use or rely on the information contained in this email or any attachments. If received in error, notify the sender immediately and delete this email and any attachments from your system. Emails cannot be guaranteed to be secure or error free as the message and any attachments could be intercepted, corrupted, lost, delayed, incomplete or amended. vThink Global Technologies do not accept liability for damage caused by this email or any attachments and may monitor email traffic.”
The following is the source code of WebUI.dragAndDropToObject keyword v10.4.2:
package com.kms.katalon.core.webui.keyword.builtin
import groovy.transform.CompileStatic
import java.text.MessageFormat
import java.util.concurrent.TimeUnit
import org.apache.commons.io.FileUtils
import org.openqa.selenium.Alert
import org.openqa.selenium.By
import org.openqa.selenium.Dimension
import org.openqa.selenium.JavascriptExecutor
import org.openqa.selenium.NoSuchElementException
import org.openqa.selenium.NoSuchWindowException
import org.openqa.selenium.TimeoutException
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebDriverException
import org.openqa.selenium.WebElement
import org.openqa.selenium.interactions.Actions
import org.openqa.selenium.support.ui.ExpectedCondition
import org.openqa.selenium.support.ui.ExpectedConditions
import org.openqa.selenium.support.ui.FluentWait
import org.openqa.selenium.support.ui.Select
import org.openqa.selenium.support.ui.Wait
import org.openqa.selenium.support.ui.WebDriverWait
import com.google.common.base.Function
import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.annotation.internal.Action
import com.kms.katalon.core.configuration.RunConfiguration
import com.kms.katalon.core.exception.StepFailedException
import com.kms.katalon.core.keyword.BuiltinKeywords
import com.kms.katalon.core.keyword.internal.KeywordExecutor
import com.kms.katalon.core.keyword.internal.SupportLevel
import com.kms.katalon.core.logging.KeywordLogger
import com.kms.katalon.core.model.FailureHandling
import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.testobject.TestObjectProperty
import com.kms.katalon.core.util.internal.ExceptionsUtil
import com.kms.katalon.core.util.internal.PathUtil
import com.kms.katalon.core.webui.common.ScreenUtil
import com.kms.katalon.core.webui.common.WebUiCommonHelper
import com.kms.katalon.core.webui.constants.StringConstants
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.driver.WebUIDriverType
import com.kms.katalon.core.webui.exception.BrowserNotOpenedException
import com.kms.katalon.core.webui.exception.WebElementNotFoundException
import com.kms.katalon.core.webui.keyword.internal.WebUIAbstractKeyword
import com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain
import com.kms.katalon.core.webui.util.FileUtil
@Action(value = "dragAndDropToObject")
public class DragAndDropToObjectKeyword extends WebUIAbstractKeyword {
@CompileStatic
@Override
public SupportLevel getSupportLevel(Object ...params) {
return super.getSupportLevel(params)
}
@CompileStatic
@Override
public Object execute(Object ...params) {
TestObject sourceObject = getTestObject(params[0])
TestObject destinationObject = getTestObject(params[1])
FailureHandling flowControl = (FailureHandling)(params.length > 2 && params[2] instanceof FailureHandling ? params[2] : RunConfiguration.getDefaultFailureHandling())
dragAndDropToObject(sourceObject,destinationObject,flowControl)
}
@CompileStatic
public void dragAndDropToObject(TestObject sourceObject, TestObject destinationObject,
FailureHandling flowControl) {
WebUIKeywordMain.runKeyword({
boolean isSwitchIntoFrame = false
try {
logger.logDebug(StringConstants.KW_LOG_INFO_CHK_SRC_OBJ)
if (sourceObject == null) {
throw new IllegalArgumentException(StringConstants.KW_EXC_SRC_OBJ_IS_NULL)
}
logger.logDebug(StringConstants.KW_LOG_INFO_CHK_DEST_OBJ)
if (destinationObject == null) {
throw new IllegalArgumentException(StringConstants.KW_EXC_DEST_OBJ_IS_NULL)
}
logger.logDebug(MessageFormat.format(StringConstants.KW_LOG_INFO_START_DRAGGING_OBJ_W_ID_X_TO_OBJ_W_ID_Y, sourceObject.getObjectId(), destinationObject))
Actions builder = new Actions(DriverFactory.getWebDriver())
isSwitchIntoFrame = WebUiCommonHelper.switchToParentFrame(sourceObject)
builder.clickAndHold(WebUIAbstractKeyword.findWebElement(sourceObject))
builder.perform()
Thread.sleep(250)
if (isSwitchIntoFrame) {
WebUiCommonHelper.switchToDefaultContent()
}
isSwitchIntoFrame = WebUiCommonHelper.switchToParentFrame(destinationObject)
WebElement destinationWebElement = WebUIAbstractKeyword.findWebElement(destinationObject)
builder.moveToElement(destinationWebElement, 5, 5)
builder.perform()
Thread.sleep(250)
builder.release(destinationWebElement)
builder.perform()
logger.logPassed(MessageFormat.format(StringConstants.KW_LOG_PASSED_DRAGGED_OBJ_W_ID_X_TO_OBJ_W_ID_Y, sourceObject.getObjectId(), destinationObject))
} finally {
if (isSwitchIntoFrame) {
WebUiCommonHelper.switchToDefaultContent()
}
}
}, flowControl, RunConfiguration.getTakeScreenshotOption(), StringConstants.KW_MSG_CANNOT_DRAG_AND_DROP_TO_OBJ)
}
}
Here I quote this just for your information.
I read the source code of the keyword and found nothing to do with screen sizes or resolution. I have no more idea. I would quit this topic, sorry.
Hi,
Thank you @kazurayam so much for supporting @saravanakumar1.
I will ask my team more about this issue and back here soon with more support. Thank you
You’re experiencing a common issue with Katalon Studio’s WebUI Drag and Drop keywords: they fail across different screen resolutions because they rely on absolute pixel coordinates or fixed element positioning that changes when screen size varies.
Root Causes:
dragAndDropByOffset() uses fixed pixel offsets (e.g., 200, 400) that don’t scale with different resolutionsdragAndDropToObject() depends on element positioning that shifts with viewport changesdragAndDropToObject() Instead of dragAndDropByOffset() (Best Practice)The dragAndDropToObject() keyword is more reliable across resolutions because it targets element-to-element rather than fixed coordinates:
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
WebUI.openBrowser('https://jqueryui.com/droppable/')
// Drag source element to destination element (resolution-independent)
WebUI.dragAndDropToObject(
findTestObject('Page_Droppable/div_draggable'),
findTestObject('Page_Droppable/div_droppable')
)
WebUI.closeBrowser()
Why this works: Element-to-element dragging automatically adjusts to wherever the elements are positioned, regardless of screen resolution.
Set a consistent viewport size and verify element visibility:
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
WebUI.openBrowser('https://example.com')
// Set consistent viewport size
WebUI.setViewPortSize(1920, 1080)
// Scroll element into view before dragging
WebUI.scrollToElement(findTestObject('Page_Example/div_draggable'), 5)
// Verify element is visible
WebUI.verifyElementVisible(findTestObject('Page_Example/div_draggable'))
// Now perform drag and drop
WebUI.dragAndDropToObject(
findTestObject('Page_Example/div_draggable'),
findTestObject('Page_Example/div_droppable')
)
WebUI.closeBrowser()
For HTML5 drag-and-drop implementations, use a custom keyword that simulates drag events via JavaScript:
package html5.dnd
import org.openqa.selenium.JavascriptExecutor
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement
import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords
public class DragAndDropHelper {
private static String getJsDndHelper() {
return '''
function simulateDragDrop(sourceNode, destinationNode) {
var EVENT_TYPES = {
DRAG_END: 'dragend',
DRAG_START: 'dragstart',
DROP: 'drop'
};
function createCustomEvent(type) {
var event = new CustomEvent("CustomEvent");
event.initCustomEvent(type, true, true, null);
event.dataTransfer = {
data: {},
setData: function(type, val) {
this.data[type] = val;
},
getData: function(type) {
return this.data[type];
}
};
return event;
}
function dispatchEvent(node, type, event) {
if (node.dispatchEvent) {
return node.dispatchEvent(event);
}
if (node.fireEvent) {
return node.fireEvent("on" + type, event);
}
}
var event = createCustomEvent(EVENT_TYPES.DRAG_START);
dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event);
var dropEvent = createCustomEvent(EVENT_TYPES.DROP);
dropEvent.dataTransfer = event.dataTransfer;
dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent);
var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END);
dragEndEvent.dataTransfer = event.dataTransfer;
dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent);
}
''';
}
@Keyword
def dragAndDrop(TestObject sourceObject, TestObject destinationObject) {
WebElement sourceElement = WebUiBuiltInKeywords.findWebElement(sourceObject)
WebElement destinationElement = WebUiBuiltInKeywords.findWebElement(destinationObject)
WebDriver webDriver = DriverFactory.getWebDriver()
((JavascriptExecutor) webDriver).executeScript(
getJsDndHelper() + "simulateDragDrop(arguments[0], arguments[1]);",
sourceElement, destinationElement
)
}
}
Then use it in your test:
CustomKeywords.'html5.dnd.DragAndDropHelper.dragAndDrop'(
findTestObject('Page_Example/img_draggable'),
findTestObject('Page_Example/div_droppable')
)
If you must use dragAndDropByOffset(), calculate offsets based on element size:
import org.openqa.selenium.WebElement
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.webui.common.WebUiCommonHelper
WebElement sourceElement = WebUiCommonHelper.findWebElement(findTestObject('Page_Example/div_draggable'), 10)
WebElement destElement = WebUiCommonHelper.findWebElement(findTestObject('Page_Example/div_droppable'), 10)
// Calculate relative offset based on element positions
int sourceX = sourceElement.getLocation().getX()
int sourceY = sourceElement.getLocation().getY()
int destX = destElement.getLocation().getX()
int destY = destElement.getLocation().getY()
int xOffset = destX - sourceX
int yOffset = destY - sourceY
// Use calculated offset
WebUI.dragAndDropByOffset(findTestObject('Page_Example/div_draggable'), xOffset, yOffset)
| Approach | Pros | Cons |
|---|---|---|
| dragAndDropToObject() | Resolution-independent, reliable | Requires both elements to be captured |
| JavaScript-based | Works for HTML5, very reliable | Requires custom keyword setup |
| Dynamic offsets | Flexible | More complex code, slower execution |
| dragAndDropByOffset() | Simple | Resolution-dependent, unreliable |
To me, your post above looks a bit off the mark.
Have you read the post by @saravanakumar1 ?
Hi @saravanakumar1,
Can you please help give more information so that my team can better support?
Which screen resolutions is failing and which is succeeding?
A full console log of their execution for both failed and successful runs.
Can they provide the AUT site? If not, can they attach a recording of their run?
Thank you