2

I'm using Phantomjs to examine my application. The page I am looking at includes a lot of components and is powered by Angularjs. My test server is slow. In the onLoadFinished event, I am imaging the web page using render:

page.onLoadFinished = function(response) {
    console.log(response, page.url);
    if (page.url.indexOf("login") == -1) {
        page.render('zoot.png');
        phantom.exit();
    }
};

My issue is that zoot.png only includes the site's menu bar. The menu bar's text and static images are rendered but the icons are Xs. The main page area is blank. A textual version number appears in the lower right which is expected.

It looks like the page was not fully drawn when the render happened. Is there another event that means "done and ready for use"?

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Tony Ennis
  • 12,000
  • 7
  • 52
  • 73

1 Answers1

3

You might find a way here to register an event when angular has finished rendering, but it might not be necessary if you are willing to wait a static amount of time:

page.onLoadFinished = function(response) {
    console.log(response, page.url);
    if (page.url.indexOf("login") == -1) {
        setTimeout(function(){
            page.render('zoot.png');
            phantom.exit();
        }, 1000);
    }
};

You can also use waitFor to explicitly wait for the appearance of a selector which denotes the end of the load.

Note that page.open(url); and page.onLoadFinished = finishedFunction; is the same as page.open(url, finishedFunction).

Community
  • 1
  • 1
Artjom B.
  • 61,146
  • 24
  • 125
  • 222
  • Thank you! I don't know if that's the right answer but it will certainly allow me to verify my suspicion that the page has not completed loading. If I wait several seconds and nothing changes there is a different issue. – Tony Ennis Dec 03 '14 at 00:05
  • 1
    You can also use [`waitFor`](https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js) if you don't want to wait a static amount of time. – Artjom B. Dec 03 '14 at 00:11
  • I waited for 10 seconds. Nothing changed. I suspect I am not handling a redirect. – Tony Ennis Dec 03 '14 at 13:34
  • But if there would be a redirect problem, nothing would have shown up on the screenshot, am I right? Please register to the [`onConsoleMessage`](http://phantomjs.org/api/webpage/handler/on-console-message.html), [`onError`](http://phantomjs.org/api/webpage/handler/on-error.html), [`onResourceError`](http://phantomjs.org/api/webpage/handler/on-resource-error.html), [`onResourceTimeout`](http://phantomjs.org/api/webpage/handler/on-resource-timeout.html) events. Maybe there are errors. – Artjom B. Dec 03 '14 at 13:40
  • PhantomJS' onConsoleMessage() reported an error that does not occur in Chrome (the site works fine). The issue involved something in the browser history not being initialized. The solution was the generally harmless `a.b = a.b || {};` I do not yet know what code path I took to get to a state where `a.b` was undefined, but that is beyond my question. Thank you again! – Tony Ennis Dec 03 '14 at 14:04