How to Scroll a Web Page Using Watir

how to scroll a web page using watir

If you have JavaScript enabled, you can access the underlying driver and execute some JavaScript to scroll on the page.

@browser.driver.executeScript("window.scrollBy(0,200)")

will scroll down the page 200 pixels along the y axix.

See here for documentation of the method:

http://www.w3schools.com/jsref/met_win_scrollby.asp

How to scroll within a table using watir-scroll

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

How to Right Scroll Using Ruby Watir?

Really good question, this should work

@b.execute_script('$("#your_element_id").scrollLeft("10000")')

Or send exact number (instead 10000) if you can read the width prior. Post html structure next time :)

Watir. Scroll to a certain point of the page

Using execute_script

To scroll to an element, you will need to execute javascript:

browser.execute_script('arguments[0].scrollIntoView();', button)

This can be seen to be working in the following script. Without the line to scroll, a chat tab overlays one of the buttons causing an exception.

require 'watir-webdriver'

browser = Watir::Browser.new :chrome
browser.goto 'https://staging2.clearfit.com/assessment/assessment/95867fb272df436352a0bd5fbdd'

buttons = browser.elements(:class => "assessment-choice")

buttons.each do |button|
    browser.execute_script('arguments[0].scrollIntoView();', button)
    button.click
end

Using the watir-scroll gem

Note that you can install the watir-scroll gem to make the scrolling line nicer. The gem allows the line to simply be:

browser.scroll.to button

The script would then look like:

require 'watir-webdriver'
require 'watir-scroll'

browser = Watir::Browser.new :chrome
browser.goto 'https://staging2.clearfit.com/assessment/assessment/95867fb272df436352a0bd5fbdd'

buttons = browser.elements(:class => "assessment-choice")

buttons.each do |button|
    browser.scroll.to button
    button.click
end

Scrolling inside a form in Watir

My guess is that this is a custom scrollable element that hides the content with the overflow: hidden style. Elements in the overflow are not considered visible/present. When you manually scroll, you're bringing the element out of the overflow so that it's present.

I've seen a couple of these in the past. Each one needed a different approach for scrolling. Without the exact HTML/CSS, it's hard to say how to scroll the element.

However, if you're not trying to test the scrolling, you could manually fire the click event. This will bypass the visibility requirements:

@browser.button(class: xxx).click!

Watir scroll down the page as long as there is more content to show

You can check if a scrollable element is at the bottom by comparing its scrollTop and scrollHeight.

The following work:

scrollable = browser.div(class: 'j6cq2') # div with overflow-y=scroll
until browser.execute_script('return arguments[0].scrollTop + arguments[0].clientHeight >= arguments[0].scrollHeight', scrollable) do
    browser.execute_script('arguments[0].scrollTop = arguments[0].scrollHeight', scrollable)
    sleep(1)
end

Note that I didn't have time to find a better solution than using #sleep. However, hopefully this gives you an idea.

Ruby watir webdriver: how to keep scrolling through lazy loading

If you are looking to determine the last link on a page with lazy loaded but limited list of options you can do something along the lines of:

loop do
  link_number = browser.links.size
  browser.scroll.to :bottom
  break if browser.links.size == link_number
end

Attempt to scroll an element to the centre of the viewport

IE & Firefox implement elementScrollBehavior. It is set for all elements for the entire session of the driver. Where 0 is default and places element at the top of the view port, and 1 scrolls the element to the bottom of the view port.

caps = Selenium::WebDriver::Remote::Capabilities.firefox('elementScrollBehavior' => 1)
Watir::Browser.new :firefox, desired_capabilities: caps

For more control you would need to use javascript (Watir should probably investigate more direct support for scrolling to an offset of an element).

browser.execute_script('javascript:window.scrollBy(250,350)')

How to Scroll a Web Page Using Watir