10

In order to test my react app using webdriver.io, I need to launch it using phantomjs.

At first I thought the problem was webdriver.io but I've realized that PhantomJS returns a blank page when I try to render.

To make some tests I wrote this javascript file:

var page = require('webpage').create();
var args = require('system').args;

var output_file = 'example.png', url = args[1];
t = Date.now();

var width = 1440;
var height = 900;
page.viewportSize = { width: width, height: height };
page.paperSize = {
   format: 'A4',
   orientation: 'landscape',
   margin: { left: '1cm', right: '1cm', top: '1cm', bottom: '1cm' }
};

console.log(url);

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};

page.onLoadFinished = function (status) {
    window.setTimeout(function () {
        try {
            page.evaluate(function (w, h) {
                document.body.style.width = w + 'px';
                document.body.style.height = h + 'px';
              }, width, height);
            t = Date.now() - t;
            console.log('Loading ' + url);
            console.log('Loading time ' + t + ' msec');
            page.clipRect = {top: 0, left: 0, width: width, height: height};
            page.render(output_file);
        }
        catch (e) {
            status = e.message;
        }
        console.log(status + ';;' + output_file);
        phantom.exit();
    }, 10000);
};

try {
    page.open(url);
    console.log('loading');
}
catch (ex) {
    console.log(ex.message);
    phantom.exit();
}

which I launch like this: phantomjs test.js http://localhost:8080

But no matter what I do, example.png is always empty.

I currently use React 0.14.7 and phantomjs 2.1.1. Does anybody have an idea about why I can't render my app ?

PS: I have not mentioned but I have no problem with chrome or firefox

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Gwendal Leclerc
  • 103
  • 1
  • 1
  • 5

2 Answers2

9

Probably has to do with the lack of ES6 support in PhantomJS. To check I added page.onError() callback to your script (always handy!) and opened some React example site to get this error:

ReferenceError: Can't find variable: Symbol

To polyfill Symbol one can inject a core.js script from this excellent package into the page before loading the target url:

page.onInitialized = function() {
    if(page.injectJs('core.js')){
        console.log("Polyfills loaded");
    }    
}

But that's for opening external sites. If the site that's being tested is under your development (as localhost url suggests) you probably could do with just configuring babel as is shown in this answer.

Vaviloff
  • 16,282
  • 6
  • 48
  • 56
  • Thank you so much. page.onError() didn't show any error on my app. But inject core.js seems to do the job. I've tried to inject phantom-shims and es5-shims but none of them solved my problem. I will follow your second link and modify my babel configuration ;) – Gwendal Leclerc Jul 20 '16 at 17:56
  • Hello @Vaviloff I just implement polyfills to parse a website like `https://www.homeaway.com/vacation-rental/p3544547`. The problem is not being solved. It loads the website except the
    tag which has the real content
     – Tripti Rawat May 17 '18 at 13:10
  • Hey @TriptiRawat, please open a new question with PhantomJS and I'll be sure to have a look at it! – Vaviloff May 17 '18 at 14:19
  • Hi @Vaviloff here's a similar issue, I injected polyfills, I kept the resolution, but the content is vanishing. The link to the question:- https://stackoverflow.com/questions/50385441/calender-widget-not-loading-when-parsing-webpage-using-phantomjs – Tripti Rawat May 21 '18 at 13:21
3

You can download PhantomJS 2.5.0 Beta at https://bitbucket.org/ariya/phantomjs/downloads.

It features updated QtWebKit engine that supports ES6 natively.

annulen
  • 41
  • 2