javascript - Twitter 上如何使用 CasperJS (PhantomJS) 处理无限滚动/动态加载

Question

尝试处理 Twitter 上的无限滚动，即使我滚动到底部，页面似乎也没有加载动态内容。

我正在做一个快速测试，看看内容是否可以使用以下代码加载:

casper.open('https://twitter.com/<account>', function() {
  this.evaluate(function() {
    window.scrollTo(0, document.body.scrollHeight);
  });
  this.capture('twitter-screenshot.png');
});

尽管我已将视口(viewport)设置为 casper.options.viewportSize = { width: 1400, height: 600 };，但屏幕截图似乎已加载整个视口(viewport)。

我检查了实际浏览器上的关注者数量，CasperJS 上的数量与滚动到底部之前加载的初始数量完全相同。所以要么:

1. 它不会触发滚动时的动态加载，因为整个视口(viewport)都已加载，因此没有滚动。
2. 滚动未正确触发。
3. 我完全想念的东西

我读到，屏幕截图功能实际上是对整个 DOM 进行屏幕截图，而不是当前视口(viewport)的实际情况。我已经在骑士/zombie/卡斯帕/幻影中达到了这一点，但从未让卷轴正常工作。任何提示都会很棒。

编辑 1:在纯 phantomJS 上使用 Vaviloff 的代码，我仍然看到相同的错误。这是终端输出:

Writing twitter-1.png...
[1] top = 10064
Writing twitter-2.png...
[2] top = 10064
Writing twitter-3.png...
[3] top = 10064
Writing twitter-4.png...
[4] top = 10064
Writing twitter-5.png...
[5] top = 10064

我注意到只有twitter-1.png被写入我的文件系统，并且它的高度非常长。我的视口(viewport)高度设置为 900在任何 page.open() 之前被调用。

我应该补充一点，我已经在 Windows 10 上进行了测试和OSX Yosemite与 phantomJS 2.1.1通过 npm 安装。

编辑 2:似乎存在一些问题，因为我先登录了我的测试帐户。

编辑3:如果您登录 Twitter，它会运行额外的脚本，并且 phantomJS 不兼容并抛出此错误 TypeError: undefined is not a constructor (evaluating 't.canPlayType(e)') 。这会杀死页面上的所有 JS。不知道如何解决这个问题。

Answer 1

PhantomJS 具有 native 滚动模拟:http://phantomjs.org/api/webpage/property/scroll-position.html

来自 a very fine book 的示例在 PhantomJS 脚本中，打开 Twitter 页面并将其向下滚动五个屏幕:

var webpage = require('webpage').create();
webpage.viewportSize = { width: 1280, height: 800 };
webpage.scrollPosition = { top: 0, left: 0 };
webpage.open('https://twitter.com/founddrama', function(status) {
  if (status === 'fail') {
    console.error('webpage did not open successfully');
    phantom.exit(1);
  }
  var i = 0,
      top,
      queryFn = function() {
        return document.body.scrollHeight;
      };
  setInterval(function() {
    var filename = 'twitter-' + (++i) + '.png';
    console.log('Writing ' + filename + '...');
    webpage.render(filename);
    top = webpage.evaluate(queryFn);
    console.log('[' + i + '] top = ' + top);
    webpage.scrollPosition = { top: top + 1, left: 0 };

    if (i >= 5) {
      phantom.exit();
    }

  }, 3000);
});

已添加

用于调试脚本的 Calbacks，尤其是 page.onError 是非常宝贵的:

webpage.onConsoleMessage = function (msg) {
    console.log(msg);
};   

webpage.onError = function (msg, trace) {
    var msgStack = ['ERROR: ' + msg];
    if (trace && trace.length) {
      msgStack.push('TRACE:');
      trace.forEach(function(t) {
        msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
      });
    }
    console.log(msgStack.join('<br />'));
};