How to scroll within a table using watir-scroll

I have an application in which there is a dynamic table, rows are loaded only when you scroll up or down. Watir-scroll is scrolling the entire page. Is there anyway I can perform the scrolling within that table?

Solution

Making an element scrollable is often done by setting the overflow style. It is likely on a div that contains the table. For example:

<html>
  <body>
    <div style="overflow:scroll; height:250px;">
      <table>
        <tr height="200px"><td>Cell A</td></tr>
        <tr height="200px"><td>Cell B</td></tr>
        <tr height="200px"><td>Cell C</td></tr>
        <tr height="200px"><td>Cell D</td></tr>
     </table>
    </div>
  </body>
</html>

There are no built-in methods in Watir (at least as of v6.17.0) for scrolling an element. However, there are still some workarounds.

Set scrollTop

You can set the scroll position of the element by setting its scrollTop property:

# Get the element that has the overflow property
div = browser.div                                                                                      

# Scroll to a specific point
div.execute_script('arguments[0].scrollTop = 100;', div) 

# Scroll down a certain amount
div.execute_script('arguments[0].scrollTop += 50;', div)

Send Keys

Depending how your application is listening for the scrolled event, setting the scrollTop might not trigger the loading of rows. An approach that is more likely to be detected is by sending the :down or :page_down keyboard keys - ie more like a real user.

It looks like both Watir and Selenium-WebDriver prevent using #send_keys for this (throws not interactable errors), so you'll need to use the action builder:

# Get the element that has the overflow property
div = browser.div

# Scroll down a bit
browser.wd.action.send_keys(div.wd, :down).perform  
browser.wd.action.send_keys(div.wd, :page_down).perform  

# Scroll to the bottom
browser.wd.action.send_keys(div.wd, :end).perform