Auto scroll a button into view with Capybara and Selenium

Question

Sometime last month (June 2013), several of our Capybara tests started failing mainly because the buttons they are trying to click are not in view. Ideally, I'd like to figure out what changed. We're currently on selenium-webdriver 2.33 but I've tried going back to 2.29 and it still doesn't work. We're running against Firefox only at the moment and maybe it's due to a newer version of Firefox.

Barring that, I can't figure out how to scroll the buttons into view. From what I gather, I can use scrollIntoView but not sure how to call it in the Capybara step. I tried variations on:

 Capybara.current_session.driver.execute_script("arguments[0].scrollIntoView(true;)", find_button(button).native)

But with no luck because find_button itself doesn't work.

Note: we are selecting based on the button's text. Selecting based on ID is possible but will require a lot of changes to our UI tests so we'd like to avoid it.

Another note: the button is in a scrollable div. The page itself doesn't scroll. — Kyle Baley, Jul 12 '13 at 20:04
What version of Firefox? You might want to try uninstalling Firefox and then installing a specific version of Firefox and then disabling the upgrade on it so that it remains at the version you expect. — djangofan, Jul 29 '13 at 16:58

Gray Kemmey · Accepted Answer · 2016-08-01T16:34:21.267

32

I normally have a module JavascriptDriver that I use to include Selenium functionality in a test, and there I define a helper method:

module JavascriptDriver
  # other code that prepares capybara to work with selenium

  def scroll_to(element)
    script = <<-JS
      arguments[0].scrollIntoView(true);
    JS

    Capybara.current_session.driver.browser.execute_script(script, element.native)
  end
end

And then in your test you can utilize that code by passing a normal Capybara element:

scroll_to(page.find("button.some-class", visible: false))

edited Aug 01 '16 at 16:34

answered Jun 28 '16 at 20:42

Gray Kemmey

976
8
12

@CJohnson: Try with the `visible: false` option. Updated my answer. – Gray Kemmey Aug 01 '16 at 16:35
Thanks man, you really saved my life! BTW, this also works for horizontal scroll :) – Emmanuel Valle Nov 03 '16 at 04:23
1

This works! BTW if the element is hidden under a static header like bootstrap header, it will not work. In my case I had to put `scrollBy(0, -50);` right after `arguments[0].scrollIntoView(true);` – Yakob Ubaidi Nov 15 '17 at 04:11

score 3 · Answer 2 · edited May 23 '17 at 11:46

3

This is a scroll bug that has shown up in Selenium and Chrome. The fix is https://stackoverflow.com/a/11048669/1935918

edited May 23 '17 at 11:46

Community

1
1

answered Dec 15 '14 at 19:44

Dan Kohn

33,811
9
84
100

score 1 · Answer 3 · answered Jun 09 '16 at 21:01

Since your page is not scrollable, you can use the same approach as the linked answer provided in the other answer, but with a variation to target your scrollable element. For example, if your scrollable element has an id of "scrollable":

page.execute_script "document.getElementById("scrollable").scrollTop += 100"

I personally hate having to scroll for tests, so if anyone comes up with a better solution to this for Capybara + Selenium, I'd love to see it.

Auto scroll a button into view with Capybara and Selenium

3 Answers3