how to scroll a web application in watir

Question

How do I scroll a web application in Watir ?

I have [e-mail]_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

Answer 3

Using Watir-Classic, the second method Justin Ko provided works great for iterating through a scrollable section to find something specific. Here's an example of that:

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')
scroll_value = 50 # change this number to match how much you want to scroll each iteration
max_loop = div_with_scroll.document.scrollHeight / scroll_value
if div_with_scroll.document.scrollHeight % scroll_value > 0 # accounts for any remainder height
    max_loop = max_loop + 1
end
for i in 0..max_loop do
    div_with_scroll.document.scrollTop = i * scroll_value # moves the scrollbar
    if div_with_scroll.text.include? 'Search Text'
        puts 'Search Text found in iteration: ' + i.to_s()
        break # exits the loop when found
    end
end

There may be a more efficient way to do what I'm doing here, but you get the idea.

Answer 4

Use Javascript (eg. bottom of page):

browser.execute_script("window.scrollTo(0, document.body.scrollHeight);\n")

Answer 5

use a correct javascript executor to achieve this result - below i have written some code to show you the 'in my opinion' best and most reliable way to achieve this:

BOTTOM OF PAGE:

((IJavaScriptExecutor)webapplication).ExecuteScript("window.scrollTo(0, document.body.scrollHeight - 5)");

TOP OF PAGE:

((IJavaScriptExecutor)webapplication).ExecuteScript("window.scrollTo(0, document.body.scrollHeight 0)");

you can also set different values to scroll to different heights - for example the scroll to bottom code i have set to 5px from the bottom of the page. good luck, hope this is of somewhat use to you.