Скребок с сайтом Phantomjs

Question

Я очищаю сайт, который использует компоненты React, используя PhantomJS в Nodejs.

С этим: https://github.com/amir20/phantomjs-node

Вот код:

phantom.create().then(ph => { 
    _ph = ph; 
    return _ph.createPage(); 
}).then(page => { 
    _page = page; 
    return _page.open(url); 
}).then(status => { 
    return _page.property('content'); 
}).then(content => { 
    console.log(content); 
    _page.close(); 
    _ph.exit(); 
}).catch(e => console.log(e)); 

Проблема содержание реагирует не отображается, это только говорит: <!-- react-empty: 1 -->" где фактический компонент реагировать должен быть загружен.

Как я могу отказаться от обработанного компонента реакции? Первоначально я переключился с чистого решения узла на PhantomJS, чтобы исправить это, но теперь я застрял.

---

UPDATE:

Так что я не имею реальное решение еще. Я переключился на NightmareJS (https://github.com/segmentio/nightmare), у которого есть хорошая функция .wait('.some-selector'), которая ждет, пока указанный селектор не будет загружен. Это устранило мои проблемы с динамически загружаемыми компонентами реакции.

Answer 1

Думаю, вам стоит ждать рендеринга элементов реакции на странице после загрузки страницы. Пример такой функции ожидания, используя обещания Q, приведен ниже. Эта функция возвращает обещание и проверяет состояние страницы каждые 50 мс. Если достигнуто требуемое состояние страницы, функция выполняет обещание. В случае таймаута функция отвергает обещание.

var phantom = require('phantom'); 
var Q = require('q'); 
var _ph, _page, _outObj; 
var url = 'https://tech.yandex.ru/maps/jsbox/'; 

phantom.create().then(ph => { 
    _ph = ph; 
    return _ph.createPage(); 
}).then(page => { 
    _page = page; 
    return _page.open(url); 
}).then(status => { 
    console.log(status); 
    return waitState(textPopulated, 3); 
}).then(() => { 
    return _page.property('content'); 
}).then(content => { 
    console.log(content); 
_page.close(); 
_ph.exit(); 
}).catch(e => console.log(e)); 

function textPopulated() { 
    return _page.evaluate(function() { 
     var layer = document.querySelector('.ace_text-layer'); 
     return layer && layer.childElementCount; 
    }).then(function(childElementCount) { 
     console.log('childElementCount: ' + childElementCount); 
     return childElementCount > 0; 
    }); 
} 

function waitState(state, timeout) { // timeout in seconds is optional 
    console.log('Start waiting for state: ' + state.name); 

    var limitTime = timeout * 1000 || 20000; 
    var startTime = new Date(); 

    return wait(); 

    function wait() { 
     return state().then(function(result) { 
      if (result) { 
       console.log('Reached state: ' + state.name); 
       return; 
      } else if (new Date() - startTime > limitTime) { 
       var errorMessage = 'Timeout state: ' + state.name; 
       console.log(errorMessage); 
       throw new Error(errorMessage); 
      } else { 
       return Q.delay(50).then(wait); 
      } 
     }).catch(function(error) { 
      throw error; 
     }); 
    } 
}