当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Why I am not able to render my ReactJS application using PhantomJS 2.1.1?

问题描述:

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

网友答案:

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 this core.js 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.org/ariya/phantomjs/downloads.

It features updated QtWebKit engine that supports ES6 natively.

分享给朋友:
您可能感兴趣的文章:
随机阅读: