Scrolling until object is visible up/down and left/right

I am workig with Ag-Grid and have gor data drivimg working with the grid

However columns and rows not shown on screen are invisible until the are scrolled to.
Any idea how to do this?
in c# I would use a try catch and scroll on the exception until the value is visible which is a bit crude. This is easy scrolling vertically as I can use the home key to scroll to the top first. But for horizontal scrolling how would i scroll to the far left or right to set the starting point.

obviously if there is a more elegant solution i would prefer that.

Hi @louis.oliver

This probably won’t work, but did u try:

1 Like

You can try and use javascript to Scroll into view

WebElement element = WebUI.executeJavaScript("return document.getElementById('someId');", null)
element.scrollIntoView(); 
element.scrollIntoView(alignToTop); 
element.scrollIntoView(scrollIntoViewOptions);

Link

but when there not shown you might not have another choice as to scoll and check.

Hi @louis.oliver ,

I am also facing the issue while scrolling horizontally in ag-grid table. Did u get any solution for it ? Kindly please guide me.

Thanks in advance.

For anyone else trying to solve this issue, I found a hacky solution specific to ag-grid.

This page https://www.ag-grid.com/javascript-grid/keyboard-navigation/ gives all the possible keyboard shortcuts for ag-grid, the one I found useful is:

Use Ctrl+← to move to the start of the line, and Ctrl+β†’ to move to the end.

This allows us to use the WebUI.sendKeys() function to scroll between the far left and right of the table, something like this:

//whatever test objects you use to access cells in the grid
TestObject firstRowFirstColumn = findTestObject()
TestObject firstRowLastColumn = findTestObject()
//move table focus to the far right cell
WebUI.sendKeys(firstRowFirstColumn, Keys.chord(Keys.CONTROL, Keys.RIGHT))
//Do something
//move table focus to the far left cell
WebUI.sendKeys(firstRowLastColumn, Keys.chord(Keys.CONTROL, Keys.LEFT))
//Do something

I only needed to access the first and last columns of the table, so this works fine for me, if you need to go to a specific column, you probably need to use:

Use the arrow keys (← ↑ β†’ ↓) to move focus up, down, left and right

You would need to keep pressing the arrow key until you get to the column number you want.

I am very much not impressed by how hard it is to just scroll an element, it seems like an common use case that should be much better supported by katalon.

1 Like