Selenium的PhantomJS Webdriver未在ReactJS中加载页面

Question

I'm trying to test a new feature of a website. 我正在尝试测试网站的新功能。 This is the only page so far built in React. 这是迄今为止React内置的唯一页面。 When I attempt to run the test in Selenium with PhantomJS the page index loads, but the full page load never triggers. 当我尝试使用PhantomJS在Selenium中运行测试时，将加载页面索引，但不会触发完整页面加载。

The page body is: 页面正文为：

<body>
    <main id="content"></main>
    <script type="text/javascript">
        function loadBundleJS( jsSource){
            var bundleJSScriptTag=document.createElement('script')
            bundleJSScriptTag.setAttribute("type","text/javascript")
            bundleJSScriptTag.setAttribute("src", jsSource)
            if (typeof bundleJSScriptTag != 'undefined'){
                document.getElementsByTagName('head')[0].appendChild(bundleJSScriptTag);
            }
        }
        var paramsArray = window.location.search.substring(1).split("&");
        Object.keys(paramsArray).forEach(function(key){
            var param = paramsArray[key];
            if (param.indexOf("/")>-1){
                param = param.substring(0, param.indexOf("/"))
            }
        })
        loadBundleJS('js/bundle.0.0.2.js')
    </script>
</body>

When the site runs in a browser the content is appended to the main tag. 当网站在浏览器中运行时，内容将附加到主标记中。 However, in PhantomJS this content never gets appended and PhantomJS loads a blank page. 但是，在PhantomJS中，此内容永远不会附加，并且PhantomJS会加载空白页。

Answer 1

The problem is not in your code, is in WebKit browser that PhantomJS runs. 问题不在您的代码中，而是在PhantomJS运行的WebKit浏览器中。 PhantomJS run an old version of WebKit engine which use an older version of ECMAScript. PhantomJS运行旧版本的WebKit引擎，该引擎使用旧版本的ECMAScript。
ReactJS use Function.bind method from ECMAScript 5. ReactJS使用ECMAScript 5中的Function.bind方法。
The solution is pretty simple, you need to define the Function.prototype.bind in your code if not exist. 解决方案非常简单，您需要在代码中定义Function.prototype.bind（如果不存在）。

** Make sure that the code is loaded before including react.js. **确保在包含react.js 之前已加载代码。

if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
        throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
            return fToBind.apply(this instanceof fNOP
                    ? this
                    : oThis,
                aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    if (this.prototype) {
        fNOP.prototype = this.prototype;
    }
    fBound.prototype = new fNOP();

    return fBound;
};

} }

Code taken from: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind#Polyfill 代码取自： https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind#Polyfill

Selenium的PhantomJS Webdriver未在ReactJS中加载页面

问题描述

1 个解决方案

解决方案1
1 2016-02-03 13:42:43

Selenium的PhantomJS Webdriver未在ReactJS中加载页面

问题描述

1 个解决方案

解决方案1 1 2016-02-03 13:42:43

解决方案1
1 2016-02-03 13:42:43