2017-02-21 36 views
0

Пытаясь обрабатывать неограниченную прокрутку на Twitter, страница, похоже, не загружает динамический контент, даже если я прокручиваю на дно.Как обращаться с неограниченной прокруткой/динамической загрузкой с помощью CasperJS (PhantomJS) на 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 и на самом деле не так, как в настоящее время окна просмотра. Я добрался до этого момента всадником/зомби/казусом/фантом и никогда не получил прокрутку для правильной работы. Любые подсказки были бы замечательными.

Редактировать 1: Используя код Vaviloff на чистом phantomJS, я все еще вижу те же ошибки. Это терминал вывода:

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 записывается в моей файловой системе, и это невероятно долго в высоту. Моя высота окна просмотра установлена ​​в 900 перед вызовом page.open().

Должен добавить, что я тестировал на Windows 10 и OSX Yosemite с phantomJS 2.1.1, установленным через npm.

Редактировать 2: Похоже, что есть проблема, потому что я сначала зашел в свою тестовую учетную запись.

Edit 3: При входе в твиттер, он запускает дополнительные скрипты и phantomJS не совместим и выдает эту ошибку TypeError: undefined is not a constructor (evaluating 't.canPlayType(e)'). Это убьет всех JS на странице. Не знаете, как обойти это.

+0

Да, скриншоты будут длинными, потому что PhantomJS отображает полную высоту страницы, это по дизайну программы. Скриншоты будут отличаться по высоте, потому что разные твиты будут иметь разную высоту. ** Редактировать 1 ** Пожалуйста, добавьте обратный вызов 'page.onError', чтобы проверить наличие ошибок. ** Редактировать 3 **, вероятно, проблема для другого вопроса. – Vaviloff

ответ

1

PhantomJS имеет встроенную эмуляцию прокрутки: 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 />')); 
}; 
+0

Спасибо. Я считаю, что я пробовал это, и он, похоже, не работал. Но позвольте мне попробовать снова с вашим кодом. Кроме того, не будет ли 'webpage.render' делать скриншот всего DOM? Поэтому каждый скриншот будет выглядеть одинаково. Я заметил это на всех моих скриншотах, что 'viewportSize' ничего не сделал./cc @Vaviloff – PGT

+0

Проверено вчера перед публикацией, работало, прокручивается. Версия PhantomJS 2.1.1. – Vaviloff

+0

Используя ваш код, что-то странно, я обновляю свое описание выше с результатами, потому что форматирование легче увидеть. – PGT