Navigating infinite scroll

807 views
Skip to first unread message

Taymon Beal

unread,
Jan 3, 2014, 3:29:30 AM1/3/14
to casp...@googlegroups.com
I'd like to use CasperJS to load and navigate content from infinite scroll webpages. I saw the new scrollToBottom function and thought it would be a good way to do this. Unfortunately, I haven't gotten it to work.

Here's my reduced-to-the-simplest-thing-I-could-think-of code:

var casper = require('casper').create();
casper.start('http://boingboing.net', function() {
  this.scrollToBottom();
  this.wait(5000);
  this.capture('boingboing.png');
});
casper.run();

The idea is that it scrolls to the bottom, waits long enough for one more screenful of content to load, and then captures it. Unfortunately, only the content that was loaded at the beginning, before any scrolling, appears in the capture.

I've tried this code and variants of it on several other sites, including Facebook and Twitter. It doesn't work anywhere. I've also seen this blog post but that didn't get me anywhere either.

Is this a bug, or am I doing something wrong? What's the right way to handle infinite scroll in CasperJS?

Thanks,
Taymon

Ray K

unread,
Jan 16, 2014, 12:12:10 PM1/16/14
to casp...@googlegroups.com
I can get some successes in infinite scrolling on some sites using something like this;

this.evaluate(function() {
  return window.document.body.scrollTop = document.body.scrollHeight;
});

this trigger the scroll to bottom.
and 

waitForResource

to wait for the corresponding XHR .

I hope this helps

Tim Montague

unread,
May 4, 2014, 4:19:03 PM5/4/14
to casp...@googlegroups.com
Capture the screen shot within a "then".
I was able to get this working with CasperJS 1.1.0 Beta 3.

var casper = require('casper').create();
casper.start('http://boingboing.net', function() {
  this.scrollToBottom();
  this.wait(1000);
}).then(function () {
  this.capture('boingboing.png');
})
casper.run();

Reply all
Reply to author
Forward
0 new messages