Scroll horizontally table in table

Web Testing
1

I try to scroll horizon in a table in table, I use scrollToElement, or something else but it doesn’t work, someone can help me with this

image
image1896×743 37 KB

image
image644×454 26.1 KB

image
image894×214 9.24 KB

1 Like
2

Yep — in this case scrollToElement() usually won’t help, because that keyword scrolls the page vertically to an element, not the inner horizontal scrollbar of a grid.

From your DOM screenshot, this looks like a DevExtreme grid, and the horizontal scroll happens inside:

<div class="dx-scrollable-container">
   <div class="dx-scrollable-content">
      <div class="dx-datagrid-content">

So you need to scroll that inner container, not the browser window.

Why your current code is not working

This line:

WebUI.executeJavaScript('window.scrollBy(1000, 0)', null)

scrolls the whole browser window horizontally.

But your table has its own internal scroll area, so nothing happens to the grid.

What to do instead

Use JavaScript to set scrollLeft on the table’s scrollable container.

Example 1 — direct horizontal scroll

WebUI.executeJavaScript("""
    var el = document.querySelector('.dx-scrollable-container');
    if (el) {
        el.scrollLeft = 1000;
    }
""", null)

Or scroll fully to the right:

WebUI.executeJavaScript("""
    var el = document.querySelector('.dx-scrollable-container');
    if (el) {
        el.scrollLeft = el.scrollWidth;
    }
""", null)

Better approach for your case

Since there may be multiple grids on the page, target the correct one more specifically.

Example 2 — scroll the purchase order grid

WebUI.executeJavaScript("""
    var containers = document.querySelectorAll('.dx-scrollable-container');
    if (containers.length > 0) {
        containers[0].scrollLeft = containers[0].scrollWidth;
    }
""", null)

If first grid is not the correct one, change containers[0] to containers[1], etc.

Best practical Katalon code

WebUI.setText(findTestObject('Procurement Management/Purchase Order/input/input_search'), 'Consumables (C)')
WebUI.delay(1)

WebUI.enhancedClick(findTestObject('Procurement Management/Purchase Order/link/1st_after-search_supplier'))

WebUI.executeJavaScript("""
    var grid = document.querySelector('.dx-scrollable-container');
    if (grid) {
        grid.scrollLeft = grid.scrollWidth;
    } else {
        throw 'Grid scroll container not found';
    }
""", null)

WebUI.delay(1)

WebUI.enhancedClick(findTestObject('Procurement Management/Purchase Order/button/button_Save'))
WebUI.delay(2)

WebUI.verifyTextPresent('Inserted successfully', false)

If .dx-scrollable-container does not work

Sometimes the actual horizontal scroll is on .dx-scrollable-content or another parent. Then try this:

WebUI.executeJavaScript("""
    var el = document.querySelector('.dx-datagrid-rowsview .dx-scrollable-container');
    if (el) {
        el.scrollLeft = el.scrollWidth;
    }
""", null)

My recommendation

Use this first:

WebUI.executeJavaScript("""
    var el = document.querySelector('.dx-datagrid-rowsview .dx-scrollable-container');
    if (el) {
        el.scrollLeft = el.scrollWidth;
    }
""", null)

That is the most likely fix for your issue.

3

hi @SDO.SITV

scrollToElement() won’t help here because it only scrolls vertically (page-level), not inside a horizontal scroll container (like your table-in-table)

what you’re dealing with is basically a div with overflow-x: auto

:white_check_mark: What you should do instead

Use JavaScript to scroll the container horizontally:

TestObject tableContainer = findTestObject('your/object/of/scrollable/div')

WebUI.executeJavaScript("""
    arguments[0].scrollLeft = arguments[0].scrollWidth
""", Arrays.asList(WebUiCommonHelper.findWebElement(tableContainer, 10)))

:repeat_button: If you want to scroll step by step (safer)

WebUI.executeJavaScript("""
    arguments[0].scrollLeft += 200
""", Arrays.asList(WebUiCommonHelper.findWebElement(tableContainer, 10)))

:warning: Important notes

  • Make sure you target the scrollable container, not the table itself
  • Usually it’s a <div> wrapping the table (check overflow-x)
  • Spy that element carefully in Katalon (this is where most people miss)

:light_bulb: Alternative (sometimes works)

If the column is already in DOM, you can try:

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

but if it’s hidden due to horizontal scroll → won’t work → JS is the way

nb:
if you can share the HTML of that table wrapper, I can help you pinpoint the exact locator :+1:

4

In my case, I went with moving the horizontal scroll bar back and forth, using the below. The movement amount I had to play with:

"checks page; move scrollbar to the right"
WebUI.verifyElementVisible(findTestObject('myPage/div_Bottom Horizontal ScrollBar'))

WebUI.dragAndDropByOffset(findTestObject('myPage/div_Bottom Horizontal ScrollBar'), 180, 0)

// blah blah blah

“checks page; move scrollbar back”
WebUI.dragAndDropByOffset(findTestObject(‘myPage/div_Bottom Horizontal ScrollBar’), -180, 0)
1 Like
5

use the below code

WebUI.executeJavaScript(“”"
var scrollableContainer = document.querySelector(‘.dx-scrollable-container’);
var targetElement = document.querySelector(‘[data-field=“ColumnName”]’);
if (scrollableContainer && targetElement) {
scrollableContainer.scrollLeft = targetElement.offsetLeft - 100;
}
“”", null)