PhantomJS not loading dynamic content

Question

I've trying to load a page with PhantomJS and save it as a .png. However, the png that is created does not look like the original and is missing most of the body. Searching online, most of the similar problems were due to not waiting long enough to load the page. However, that hasn't resolved my issue. This is what I'm running:

var page = require('webpage').create();
var websiteAddress = 'http://poe.ninja/standard/currency';
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1920, height: 1080 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 1920, height: 1080 };

page.open(websiteAddress, function (status) {
    setTimeout(function(){
        page.render('output.png');
        phantom.exit();
    }, 5000); // 5 sec should be enough
});

Am I doing something wrong or is this a bug in PhantomJS?

Here are images of what it should look like and what it actually looks like:

Expected: Actual:

Add [page.onError](http://phantomjs.org/api/webpage/handler/on-error.html) callback to check if there were any errors. — Vaviloff, Nov 23 '16 at 07:46

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

The target site is a React application which probably uses some newer ES6 javascript syntax that is not available in current PhantomJS (as it uses an older QTWebkit rendering engine).

The solution is to use a polyfill library to make up for those missing methods as is done in this answer: https://stackoverflow.com/a/38471938/2715393

edited May 23 '17 at 11:53

Community

1
1

answered Nov 23 '16 at 18:18

Vaviloff

16,282
6
48
56

That did it! Thanks! – Retik Nov 23 '16 at 20:06

score 0 · Answer 2 · answered Nov 23 '16 at 08:11

Use page.onResourceRequested = function(request) {} and page.onResourceReceived = function(response) {} callbacks to keep a tally of started and completed resource downloads. Once your onResourceReceived callback detects that all downloads have finished, then call page.render(). This is more reliable than a 5 second timeout.

I do recommend waiting 0.5 seconds before onResourceReceived calls page.render() though, since it's possible for the last pending resource to finish but then trigger additional downloads.

PhantomJS not loading dynamic content

2 Answers2