how to scroll a web application in watir

Question

How do I scroll a web application in Watir ?

I have tried@browser.send_keys :space

This just brings the whole page down. But I have a scroll within the application, I need to scroll the vertical scroll bar down & up in my automation testing, Please help me !

Thanks!

<div dojoattachpoint="containerNode" class="containerNode tabContentPane typeNavigationSingleChild" style="overflow: auto; left: 5px; top: 10px; width: 1549px; height: 535px;">
  <div pageid="lifecycle_theme_home_page_dashboard_pageId" id="lifecycle_theme_home_page_dashboard_pageId" style="height: 535px; padding: 0px; width: 1549px;" widgetid="lifecycle_theme_home_page_dashboard_pageId" title="" role="group" class="dijitContentPane wcs-nullLayout">    

Answer 1

Solution 1) Scroll to Last Element

I think Vinay's approach should work. However, in the current form, it assumes that the element already exists on the page. I am guessing the element you want is only visible once you scroll far enough. So what you can do is scroll to the last element in the div.

Watir-Webdriver

In Watir-Webdriver:

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')
div_with_scroll.elements.last.wd.location_once_scrolled_into_view

Watir-Classic

In Watir-Classic, it is different since it does not use selenium-webdriver:

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')
div_with_scroll.elements.last.document.scrollIntoView

Solution 2) Use ScrollTop Property

As an alternative, if the above does not work, you can set the scrollTop property to move the div element's scrollbar. This worked for an application that I was working on that had content that was only loaded once you scrolled to the bottom.

Watir-Webdriver

To jump the scrollbar to the bottom, which in theory should trigger the below content to load, set the scrollTop property to the scrollHeight:

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')
scroll_bottom_script = 'arguments[0].scrollTop = arguments[0].scrollHeight'
div_with_scroll.browser.execute_script(scroll_bottom_script, div_with_scroll)

To jump back to the top, set the scrollTop to zero.

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')
scroll_top_script = 'arguments[0].scrollTop = 0'
div_with_scroll.browser.execute_script(scroll_top_script, div_with_scroll)

You can also use any value in between depending on where you need to go to.

Watir-Classic

In Watir-Classic, you can set the scrollHeight more directly:

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')

#Go to bottom
div_with_scroll.document.scrollTop = div_with_scroll.document.scrollHeight

#Go to top
div_with_scroll.document.scrollTop = 0

Answer 2

if the element is at the bottom of the page, it will load more content:

browser.element.wd.location_once_scrolled_into_view