Scrolling to an element


Still relatively new to the tool.

One of my pages has a table that has been scaled down so that only 5 rows can be seen on-screen; you need to scroll the table(not the window) to view the other data.

The site is based on the web and is designed using React and MaterialUI.

I dont know if its due to MaterialUI or not, but the XPath also seems to randomise and not have a static value I can refer to. (eg. //div[2]/div/div/div/div[7] - this XPath can either refer to the 3rd, 6th, 10th or 20th row element depending on where I scrolled to)

I’ve tried using the various ‘Scroll to Element’ addons, but they seem to scroll the entire window as opposed to the table.

How do I make it so that I can scroll the table to view the row I need?

Basically, the end result I’m looking for is to be able to scroll to and get a specific text element from the specific row element. The row element in question may or may not be in view.

Hi @erik.yeow

You can add a step with “execute javascript” addon and use this javascript function:

scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

What you have to do is actually is to copy the JS path of the specific element:

After you have copied the JS path, you have to paste this script as an input inside the step of the execute javascript:

And that’s it, it should work well.
Let me know if you have managed, I’d be happy to help :slight_smile:

As per suggestion, I tried a simple test.

While it kinda works, I cant help but question a few things:-
a) how does it differ compared to the ‘Scroll to Element with Javascript’ addon?
b) must it only be JS? Can I use, say, XPATH?
c) most importantly, if TestProject is able to locate the element(using the magnifying glass), it seems to work. However, if TestProject fails to locate it, the scroll fails. Is this the expected behaviour?

What I mean with regards to point c: let’s say my table has 30 rows with a viewing window of only 5 rows. The element Im searching for is the 15th row. The default scroll which starts from row 1 will fail to locate it; thus fail to scroll to it.

However, if I manually scroll until, say…the 10th row is in view(say…I can view rows 7-11). The 15th row, while technically “hidden” from view due to the size of the viewing window, can now be located using the magnifying glass, thus the JS will execute and kinda scroll towards it.

As mentioned, is this the expected behaviour? Cause this is the same limitation as the aforementioned ‘Scroll to Element with Javascript’ addon.

For better reference, this is how my table looks like

I need to make it so that in a table with perhaps 100 rows, and a viewing screen of only 3 rows, I should be able to scroll so that the 30th or whatever row is in view, as this will then allow follow-up steps to access the data the row contains.

Hi @alex.ivanov
I am trying to create csv file with table’s data.
My table is same with the above problem.
I used Create an CSV file from a web table in a specific location but it seems to only save data that can be seen on screen, not all of data (not include data without scrolling).
I want to ask that are there any way to get all data of table and save on csv file?

Thank in advance!

Hi Alex, I am trying to use similar step in my test
document.querySelector(“input[placeholder=‘Enter your email address’]”).scrollIntoView({ behavior: ‘smooth’, block: ‘nearest’, inline: ‘start’ })

I am getting javascript error: Cannot read properties of null (reading ‘scrollIntoView’)

I am executing in headless chrome browser, I also added a pause before this step.

Any other advice for scrolling in headless browser?

i have exactly the same problem

This topic was automatically closed after 180 days. New replies are no longer allowed.