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

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

• javascript
• reactjs
• phantomjs

• Good question! I have the same issue right now! – Donovan Charpin Commented Jul 19, 2016 at 21:44
• Your question currently has nothing to do with webdriver-io. When the plain PhantomJS issue is solved, you can ask a question specific to webdriver-io – Artjom B. Commented Jul 20, 2016 at 4:35

2 Answers 2

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.

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

It features updated QtWebKit engine that supports ES6 natively.