Question

在我的AngularJS（v.1.2.9）应用程序的Win8上使用最新的phantomJS（1.9.7），我无法与我的应用程序进行交互。
我一直在收到消息 InvalidElementStateError: {"errorMessage":"Element is not currently interactable and may not be manipulated"。

当我致电render()时，我得到一张空图片;

如果我在调用render()之前向我的脚本添加超时，我会得到一个完全错误的页面视图：
enter image description here

为了比较，这是在任何其他浏览器中的样子：
enter image description here

我以前用过屏幕捕获的脚本 -

var page = require('webpage').create();
page.open('http://localhost/app/account#/login', function() {
    setTimeout(function() {
        page.render('login-phantom.png');
        phantom.exit();
    }, 1000);
});

还有其他人遇到过类似的事吗？我应该检查什么？

Answer 1

超时不会真正有用（除非你设置超长时间），因为网络响应速度会不时变化。最好的选择是有一个变量，通知数据加载（在角度侧）何时完成，例如$scope.dataStatus = 'ready'。然后，您可以向html上的元素添加data-status属性，并从 phantomjs 侧进行轮询以查看数据是否已加载。您可以在 phantomjs 上的page.evaluate内进行投票。

Matsko在这些行上写了一个blog和一些sample code

所以你的 phantomjs 代码看起来像：

var page = require('webpage').create();
page.open('http://localhost/app/account#/login', function (status) {
    var delay, checker = (function() {
        var html = page.evaluate(function () {
            var status = document.getElementById('status');
            if(status.getAttribute('load-status') == 'ready') {
                return document.getElementsByTagName('html')[0].outerHTML;
            }
        });
        if(html) {
            clearTimeout(delay);
            page.render('login-phantom.png');
            phantom.exit();
        }
    });
    delay = setInterval(checker, 100);
});

虽然您的HTML可能是：

<html>
    <head>...</head>
    <body>
        <div id="status" load-status="{{ dataStatus }}"></div>
    </body>
</html>

希望有所帮助

无法使用我的angularJS应用程序与phantomJS一起使用

1 个答案: