How to scroll web application in watir

Question

How to scroll web application in Watir?

I tried @browser.send_keys :space

It just brings the whole page down. But I have scrolling in the application, I need to scroll the vertical scroll bar down and 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 the last item

I think the Vinay approach should work. However, the current form assumes that the item already exists on the page. I assume that the item you want is displayed only after scrolling far enough. So what you can do is scroll to the last element in the div.

Watir-webdriver

At 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 because 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 the ScrollTop property

Alternatively, if the above does not work, you can set the scrollTop property to move the scroll bar of the div element. This worked for the application I was working on, and contained only the content that was downloaded only after scrolling down.

Watir-webdriver

To move the scroll bar to the bottom, which theoretically should launch the content loaded below, set the scrollTop property to 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 return to the top, set scrollTop to 0.

 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 between them, depending on where you need to go.

Watir-classic

In Watir-Classic, you can directly set scrollHeight :

 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 item 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 Justin Ko method provided great opportunities to iterate through a scrollable section to find something specific. Here is an example of this:

 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 (e.g. at the bottom of the page):

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

Answer 5

use the correct javascript executor to achieve this result - below I wrote the code to show you, in my opinion, the best and most reliable way to achieve this:

BOTTOM PAGE:

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

TOP PAGE:

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

You can also set different values ​​for scrolling to different heights - for example, I set scrolling to the bottom code to 5 pixels at the bottom of the page. Good luck, I hope that this will be somewhat useful for you.