"Scroll To" command is interrupted by following command

Summary:
The “Scroll To Element/Position” command is interrupted by whatever command follows it.

Example:

WebUI.scrollToElement(findTestObject('button_Update'), 0)
WebUI.click(findTestObject('button_Update'))

(Assuming the browser is viewing the top of the page and button_Update is at the bottom and not currently visible.)

Expected: Automation scrolls to the bottom of the page until button_Update is as high on the page as possible, then clicks.
Actual result: ScrollToElement is canceled and automation immediately tries to click button_Update, which is not in view.
Workaround: Add “WebUI.delay(1)” or other Wait command after every ScrollTo command.

Blocker: No. Workaround is easy to implement. But it is annoying having to update old scripts that previously worked fine with extra delays.


Operating System: Windows 11
Katalon Studio version 10.1.1
Environment: Chrome Version 135.0.7049.42

1 Like

Try and snap your fingers in zero seconds. Too bad, you failed. Same as your statement. Instead, try:

WebUI.scrollToElement(findTestObject('button_Update'), 10)

Edit: since you are trying to get to the bottom of the page, you can also use:

WebUI.scrollToPosition(300, 5000)

with the last number large enough to get you to the bottom of your page. This version does not have a ‘timeOut’ parameter at all.

Edit2: You really do not want to scroll directly to your object but to an element about 2 cm (an inch) above it, so your object is in the viewport. If you are lacking objects around that desired position, you might use:

pItem = WebUI.findWebElement(findTestObject('button_Update'))
WebUI.scrollToPosition(300, pItem.getLocation().getY() - 100)
1 Like

To resolve the issue where the Scroll To command is interrupted by subsequent actions (e.g., clicks) in Katalon Studio, follow these structured solutions instead of relying on WebUI.delay:

1. Use WaitForElement Commands

Add explicit waits to ensure the element is clickable or visible after scrolling:

WebUI.scrollToElement(findTestObject('button_Update'), 0)
WebUI.waitForElementClickable(findTestObject('button_Update'), 10) // Wait up to 10 seconds
WebUI.click(findTestObject('button_Update'))

2. Use retryOnFailure (Custom Workaround)

Create a retry mechanism to handle transient visibility issues:

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

// Define a retry method
def clickWithRetry(retryCount) {
  for (int i = 0; i < retryCount; i++) {
    try {
      WebUI.scrollToElement(findTestObject('button_Update'), 0)
      WebUI.click(findTestObject('button_Update'))
      break // Exit loop on success
    } catch (Exception e) {
      if (i == retryCount - 1) {
        throw e // Fail test on final retry
      }
    }
  }
}

// Usage
clickWithRetry(3)

3. Verify Element Visibility with JavaScript

Use JavaScript to confirm the element is in the viewport before clicking:

WebUI.scrollToElement(findTestObject('button_Update'), 0)

// Custom script to check element visibility
def isElementInViewport = CustomKeywords.'com.yourpackage.Keywords.isElementInViewport'(findTestObject('button_Update'))

if (isElementInViewport) {
  WebUI.click(findTestObject('button_Update'))
} else {
  throw new Exception("Element not in viewport after scrolling.")
}

Custom Keyword isElementInViewport:

@Keyword
def isElementInViewport(TestObject to) {
  def element = WebUiBuiltInKeywords.findWebElement(to)
  def jsExecutor = (JavascriptExecutor) DriverFactory.getWebDriver()
  return jsExecutor.executeScript("""
    var rect = arguments[0].getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  """, element)
}

4. Use Enhanced WebUI Keywords (if available)

Upgrade to Katalon Studio 8.6.5+ and use the Enhanced WebUI plugin for built-in retries:

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.webui.keyword.internal.WebUIAbstractKeyword as EnhancedWebUI

EnhancedWebUI.scrollToElement(findTestObject('button_Update'))
EnhancedWebUI.click(findTestObject('button_Update'))

5. Adjust Browser-Specific Settings

For Chrome, add experimental flags to improve scrolling behavior in DriverFactory:

import org.openqa.selenium.chrome.ChromeOptions

ChromeOptions options = new ChromeOptions()
options.setExperimentalOption("forceDevToolsScreenshot", true) // Stabilizes rendering
options.setExperimentalOption("scrollBehavior", "smooth") // Smooth scrolling
WebUI.openBrowser('', options)

Why This Happens

  • Asynchronous Execution: Katalon Studio commands execute asynchronously. The scroll action may not complete before the next command (e.g., click) is triggered.
  • Browser/DOM Timing: Modern browsers and frameworks (e.g., React/Angular) may delay rendering updates, causing elements to not be immediately interactive.

Best Practices

  • Avoid WebUI.delay: Use explicit waits (waitForElementClickable, waitForElementVisible).
  • Validate Visibility: Use JavaScript or custom keywords to confirm elements are in the viewport.
  • Retry Mechanisms: Implement retries for flaky interactions.
1 Like

You can try to add a general delay for actions from Project Settings > Execution > WebUI