为什么我无法使用 PhantomJS 2.1.1 呈现我的 ReactJS 应用程序?

IT技术 javascript reactjs phantomjs
2021-02-26 08:12:50

为了使用 webdriver.io 测试我的 React 应用程序,我需要使用 phantomjs 启动它。

起初我以为是 webdriver.io 的问题,但我意识到当我尝试渲染时 PhantomJS 返回一个空白页面。

为了进行一些测试,我编写了这个 javascript 文件:

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();
}

我是这样启动的: phantomjs test.js http://localhost:8080

但无论我做什么,example.png总是空虚的。

我目前使用 React 0.14.7 和 phantomjs 2.1.1。有没有人知道为什么我不能呈现我的应用程序?

PS:我没有提到,但我对 chrome 或 firefox 没有问题

2个回答

可能与 PhantomJS 中缺乏 ES6 支持有关。为了检查,我在脚本中添加了page.onError()回调(总是很方便!)并打开了一些 React 示例站点以获取此错误:

ReferenceError: Can't find variable: Symbol

要对 Symbol进行polyfill,可以在加载目标 url 之前将这个优秀包中core.js脚本注入页面:

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

但那是为了打开外部网站。如果正在测试的站点正在您的开发中(如 localhost url 建议的那样),您可能只需配置 babel,如本答案所示

嘿@TriptiRawat,请用 PhantomJS 提出一个新问题,我一定会看一看!
2021-05-05 08:12:50
嗨@Vaviloff 这是一个类似的问题,我注入了 polyfill,我保留了分辨率,但内容正在消失。问题的链接:- stackoverflow.com/questions/50385441/...
2021-05-08 08:12:50
你好@Vaviloff 我只是实现了 polyfills 来解析像https://www.homeaway.com/vacation-rental/p3544547. 问题没有得到解决。它加载网站,除了具有真实内容的 <main> 标签
2021-05-16 08:12:50
太感谢了。page.onError() 在我的应用上没有显示任何错误。但是注入 core.js 似乎可以完成这项工作。我试过注入 phantom-shims 和 es5-shims 但它们都没有解决我的问题。我将按照您的第二个链接并修改我的 babel 配置;)
2021-05-18 08:12:50

您可以在https://bitbucket.org/ariya/phantomjs/downloads下载 PhantomJS 2.5.0 Beta

它具有更新的 QtWebKit 引擎,原生支持 ES6。

@jagzviruz 在这里也一样。你最终解决了问题吗?
2021-04-26 08:12:50
对我不起作用。当我截取屏幕截图时,它仍然继续显示一个空白页面。
2021-05-13 08:12:50