Reputation: 3
can anybody please help me with this issue?
I'm scraping a local HTML file with PhantomJS and I'm trying to show the content of the HTML tags with class "test" on my screen. I do get the content of the first tag, but somehow I don't get the next one.
-= HTML / index.html =-
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="parent-id">
<p>hello word 1</p>
<p class="test">hello word 2</p>
<p class="test">hello word 3</p>
<p>hello word 4</p>
</div>
</body>
</html>
-= PhantomJS / test2.js =-
var fs = require('fs');
var page = require('webpage').create();
page.settings.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:49.0) Gecko/20100101 Firefox/49.0';
page.viewportSize = {width:1200, height:1024};
page.onConsoleMessage = function (msg) {
//console.log(msg);
}
page.open('http://localhost/index.html', function(status) {
if (status == 'success') {
var products = page.evaluate(function() {
return document.getElementsByClassName('test')
});
for(var i = 0; i < products.length; ++i) {
if(products[i]) {
console.log(products[i].innerHTML);
}
}
phantom.exit();
} else {
console.log('Unable to load the address!');
phantom.exit();
}
});
when I run phantomjs "test2.js" I got:
hello word 2
While I would expect to get:
hello word 2
hello word 3
Upvotes: 0
Views: 1310
Reputation: 724
You should not return elements from page context. Return simple values. This example works for your index.html:
page.open('http://localhost/index.html', function(status) {
if (status == 'success') {
var products = page.evaluate(function() {
return [].map.call(document.getElementsByClassName('test'), function(elem) {
return elem.innerHTML;
});
});
for(var i = 0; i < products.length; ++i) {
if(products[i]) {
console.log(products[i]);
}
}
phantom.exit();
} else {
console.log('Unable to load the address!');
phantom.exit();
}
});
Upvotes: 1