为什么 phantomJS 无法从此页面获取标记?

Question

我已经在某些站点上尝试了此代码并且它有效，但在其他站点上，PhantomJS和casperJS似乎无法成功等待动态加载的内容。JavaScript加载的内容对casperJS来说是不可见的，即使等待了几分钟。

var casper = require('casper').create({
pageSettings: {
loadImages: false
}
});

casper.start('https://betyetu.co.ke/sportsbook/SOCCER/');
casper.waitFor(function check() {
return this.evaluate(function () {
return document.querySelectorAll('div.events-app__group').length > 1;
});
}, function then() {
this.echo('Found elements');
}, function timeout() {
this.echo('Still timing out before returning element count');
}, 60000);
casper.run();

当我只查询一个没有类的div 时，它会返回已找到匹配元素的消息。这是来自不需要 JS 加载的外部脚手架。所有带有我感兴趣的数据的内部元素都不会被加载/不适用于 casperJS。为什么会这样呢？

Answer 1

CasperJS是一个用于运行PhantomJS脚本的辅助库。PhantomJS有一个相当过时的Web引擎，不支持现代javascript，所以网站在PhantomJS中会越来越频繁地中断。目标站点是那些在PhantomJS甚至Internet Explorer 11中无法完全运行的站点之一。

但是使用polyfills，为旧浏览器模拟较新的 js 功能的库，我们可以使用 CasperJS 更长的时间。在这里，我在PhantomJS 中创建页面后，但在访问站点之前注入了优秀的 core.js 库。这样，我们的旧浏览器将拥有一组新的JavaScript功能。

var casper = require('casper').create({
// it's better to blend with the crowd
pageSettings: {
userAgent: "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36",
loadImages: false
},
viewportSize : { width: 1280, height: 720 },
verbose: true,
});
// Apply the bandaid in the form of core.js polyfill
casper.on('page.initialized', function() {
casper.page.injectJs('./core.js');
});
casper.start('https://betyetu.co.ke/sportsbook/SOCCER/');
casper.waitFor(function check() {
return this.evaluate(function () {
return document.querySelectorAll('div.events-app__group').length > 1;
});
}, function then() {
var count = this.evaluate(function () {
return document.querySelectorAll('div.events-app__group').length;
});
this.echo('Found elements: ' + count);
casper.capture('screen.jpg');
}, function timeout() {
this.echo('Still timing out before returning element count');
}, 5000);
casper.run();

找到的元素： 28