如何在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'); 
}); 

，然後將截圖好像它加載，即使我已經設置視口casper.options.viewportSize = { width: 1400, height: 600 };

整個視口

我檢查了一個實際瀏覽器上的追隨者人數，並且CasperJS上的數字與您在滾動到底部之前加載的初始數字完全相同。因此：

1. 它不會觸發滾動上的動態加載，因爲整個視口已加載，所以沒有滾動。
2. 滾動沒有正確觸發。
3. 什麼我完全缺少

我讀過的截圖功能實際上截圖整個DOM，是當前視實際上並不怎麼樣。我已經在horseman/zombie/casper/phantom中得到了這一點，並且從未得到過滾動條以正常工作。任何提示都會很棒。

編輯1： 在純幻像JS上使用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被寫入到我的文件系統，它是高度令人難以置信的長。在調用任何page.open()之前，我的視口高度設置爲900。

我應該補充說我已經在Windows 10和OSX Yosemite上進行了測試，並且通過npm安裝了phantomJS 2.1.1。

編輯2： 看起來像有一些問題，因爲我已經登錄到我的測試帳戶。

編輯3： 如果您登錄到Twitter的，它運行額外的腳本和phantomJS不兼容而拋出這個錯誤TypeError: undefined is not a constructor (evaluating 't.canPlayType(e)')。這將殺死頁面上的所有JS。不知道如何解決這個問題。

Answer 1

PhantomJS具有本土滾動仿真：http://phantomjs.org/api/webpage/property/scroll-position.html

從a very fine book上PhantomJS腳本樣本，打開一個Twitter頁面ANS滾動這五個屏幕下：

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 />')); 
};