Cucumber Capybara scroll to bottom of page

Question

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?

Solution 1

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

Solution 2

You could use javascript to achieve this:

page.execute_script "window.scrollBy(0,10000)"

Solution 3

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

page.execute_script('window.scrollTo(0, document.body.scrollHeight)')

Comments

[Nat Ritmeyer]

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...

[lukas.pukenis]

Genious. +1 even though not a direct answer ;))

[lukas.pukenis]

@NatRitmeyer well yes... That's why it's called footer, yes?

[Nat Ritmeyer]

Indeed :) But have you never seen a #footer that isn't at the bottom of the page?

[Dan Kohn]

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!

[Drew]

If you have jQuery available you can run window.scrollBy(0, $(window).height())

[igorsantos07]

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.

[ZedTuX]

Unfortunately, this doesn't work in my Angular app, I don't know why yet.

[taystack]

This is good but it doesn't work for javascript SPAs that have # in the route. (sad face)

[Arnaud Meuret]

To be just as nitpicky as your comment on visit '#footer', this only works if your page is less than 10000 units high.

[Nat Ritmeyer]

@ArnaudMeuret I salute your pedantry :)