37

I'd like to use my Cucumber/Capybara setup to test endless scroll by driving a browser and scrolling to the bottom of the page to ensure that the new content is loaded. Is there a way to do this?

Eric M.
  • 5,399
  • 6
  • 41
  • 67

4 Answers4

74

You could use javascript to achieve this:

page.execute_script "window.scrollBy(0,10000)"
Nat Ritmeyer
  • 5,634
  • 8
  • 45
  • 58
  • 8
    For Google purposes, I got here with the error "unknown error: Element is not clickable at point (750, 341). Other element would receive the click" and the solution was `page.execute_script "window.scrollBy(0,500)"`. Thanks! – Dan Kohn Dec 15 '14 at 19:43
  • 4
    If you have jQuery available you can run `window.scrollBy(0, $(window).height())` – Drew May 31 '16 at 17:19
  • Unfortunately, this doesn't work in my Angular app, I don't know why yet. – ZedTuX Feb 22 '19 at 09:13
  • To be just as nitpicky as your comment on _visit '#footer'_, this only works if your page is less than 10000 units high. – Arnaud Meuret Oct 01 '19 at 06:34
  • @ArnaudMeuret I salute your pedantry :) – Nat Ritmeyer Oct 01 '19 at 08:26
24

I solved this with visit '#footer' inside a "scroll to the bottom of the page" step.

Dorian
  • 7,749
  • 4
  • 38
  • 57
Eric M.
  • 5,399
  • 6
  • 41
  • 67
  • 2
    This only works if you have an element with an `id` of `footer`. It also assumes (reasonably) that the footer is at the bottom of the page... – Nat Ritmeyer Aug 13 '13 at 18:55
  • Genious. +1 even though not a direct answer ;)) – lukas.pukenis Jan 29 '14 at 13:09
  • 3
    @NatRitmeyer well yes... That's why it's called footer, yes? – lukas.pukenis Jan 29 '14 at 13:14
  • 1
    Indeed :) But have you never seen a #footer that isn't at the bottom of the page? – Nat Ritmeyer Jan 29 '14 at 17:21
  • 1
    more than discussing where the footer is placed, it assumes the footer _was loaded_! I got here looking for a way to take page screenshots of the bottom parts and, if there's some failure on the page, that method won't work :/ The JS solution is a bit safer in those cases. – igorsantos07 Apr 24 '17 at 04:18
  • This is good but it doesn't work for javascript SPAs that have `#` in the route. (sad face) – taystack Apr 23 '19 at 18:01
3

A solution without jQuery or adapts to any height without magic numbers:

page.execute_script('window.scrollTo(0, document.body.scrollHeight)')
Dorian
  • 7,749
  • 4
  • 38
  • 57
1

As an example:

page.scroll_to(find('footer'))

More details here

Sasha Stadnik
  • 502
  • 1
  • 6
  • 16