[KShare] Scrolling on the AG Grid Table

Product Insights
, , ,
1

Hi Community members, :wave:

Have you ever found it difficult to manage the act of scrolling on a table or web page when a component has several scrolls?

The AG Grid Table is a featured example of the situation that we mentioned above.

The table has two distinct scroll bars, such as the horizontal and vertical ones.

We must accurately define the desired scroll bars to accomplish scrolling precisely.

:information_source: For example, with this page https://ag-grid.com/example/

We have the class names of scroll bars below

Vertical Bar: .ag-body-vertical-scroll-viewport

Horizontal bar: .ag-body-horizontal-scroll-viewport

How can we get those names precisely? Let us show you the tips below:

:information_source: Pause the web page in 3 seconds to capture the scroll bar by using the command

Note: This approach suits hidden scroll bars

setTimeout(() => {debugger}, 3000)

  1. Open the DOM
  2. Select the “Console” tab
  3. Type the command: setTimeout(() => {debugger}, 3000)
  4. Enable the Scroll bar

Then, we can inspect the scroll bar to obtain the exact name while the website is paused for debugging.

CaptureSrollingObject

Now, we go through the typical actions we take while dealing with scrolling bars:

Scenario 1: Scroll from Left to Right

def scrollHorizontalBy = 2000; // An estimated number that 
                            indicates where the element is that we need to scroll to.

def horizontalScrollbar = WebUIAbstractKeyword.findWebElement(
                             findTestObject('Object Repository/HorizontalBar'), 30);

WebUI.executeJavaScript('arguments[0].scrollBy(
                             { left: arguments[1], behavior: "smooth" })', 
                             [horizontalScrollbar, scrollHorizontalBy]);

Scenario 2: Scroll from Right to Left

def scrollHorizontalBy = -2000; // An estimated number that 
                            indicates where the element is that we need to scroll to.

def horizontalScrollbar = WebUIAbstractKeyword.findWebElement(
                              findTestObject('Object Repository/HorizontalBar'), 30);

WebUI.executeJavaScript('arguments[0].scrollBy(
                                      { left: arguments[1], behavior: "smooth" })', 
                                      [horizontalScrollbar, scrollHorizontalBy]);

Scenario 3: Vertical Scrolling

def scrollVerticalBy = 500; // An estimated number that 
                            indicates where the element is that we need to scroll to.

def verticalScrollbar = WebUIAbstractKeyword.findWebElement(
                                            findTestObject('Vertical Scrollbar'), 0); 

WebUI.executeJavascript('arguments[0].scrollBy(
                                     { top: arguments[1], behavior: "smooth" })', 
                                     [verticalScrollbar, scrollVerticalBy]);

We hope you find the information above interesting. If so, kindly leave your thoughts on this article, and we will arrange advanced sharing during the upcoming sessions that will address the scroll bars on the AG Grid Table.

Moreover, please feel free to share with us more scrolling situations that you have used in your projects. You can also share with us any recommendations you have for using scrolling bars to improve the community’s experience with automated testing.

Reference

https://dev.azure.com/linhnguyen0979/_git/KShare_AGGridTable_ScrollingBars

AGGrid_HorizontalScroll

If you find this article helpful, then don’t forget to leave us a like :+1: or :heart: !

2 Likes
2

Thank you the Product Support team (@support.squad) and Linh Nguyen (@linh.nguyen) Thong Tran (@thong.tran) for this article!

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 consumers 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.

To read more KShare articles, simply navigate to the support tag, or check out the new KShare section on our Katalon Community Hub!

2 Likes
3

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: