Phantomjs login, redirect and render page after pageLoad finishes

Question

I have a website with a login form. If a user is not logged and tries to access a internal page it will be redirected to the default page. For instance if I try to access http://siteURL.PhantomPrint.aspx I will be redirected to http://siteURL/Default.aspx?ReturnUrl=PhantomPrint.aspx. And after login an automatic redirect will take place to the page.

After the redirect I want to render the page with Phantomjs and save it as pdf. The problem is that the rendering takes place before page load is finished and I can properly render the page only if I use timeouts. In this case, if the page loading takes longer than normal the resulted pdf is not the proper one.

Below you can find the java script code:

var page = require('webpage').create(); 
var index = 0,

page.onConsoleMessage = function (msg) {
    console.log(msg);
};

var steps = [
  function () {
      //Load Login Page
      page.open("http://siteURL.PhantomPrint.aspx", function () {
          //Enter Credentials
          page.evaluate(function () {
              console.log("filling inputs");

          var usernameInput = document.getElementById("txtUsername");
          usernameInput.value = "user";

          var passwordInput = document.getElementById("txtPassword");
          passwordInput.value = "password";

          var loginButton = document.getElementById("btnLogin");
          loginButton.click();

          console.log("login button was submitted");
      });
  });
  },

   function () {
            // page.onLoadFinished = function () {
                // Render the page to pdf
                page.render('example.png');
                phantom.exit();
                console.log("rendering finished");
           //});
        }
    ];


    interval = setInterval(function () {
        if (!loadInProgress && typeof steps[testindex] == "function") {
            console.log("step " + (testindex + 1));
            steps[testindex]();
            testindex++;
        }
        if (typeof steps[testindex] != "function") {
            console.log("test complete!");
            phantom.exit();
        }
    }, 1000);

Any suggestions on how I can assure that rendering is done only after the redirected page is finishing loading are welcomed.

Answer 1

It looks like you want to process navigation steps. You would need to use page.onNavigationRequested to pick up if a page load/redirect was issued. This will be likely hard to maintain. You would also have to discard the idea of using a step array with setInterval.

Another possibility would be to specifically wait for some selector that is present in the target page using waitFor, but then again, this would make the use of setInterval impossible.

---

CasperJS is actually built on top of PhantomJS and uses steps to navigate the site. When you use any of the then* functions it will automatically pick up a page load and wait for page load finish until executing the callback.

var casper = require('casper').create(); 

casper.on("remote.message", function (msg) {
    console.log(msg);
});

casper.start("http://siteURL/PhantomPrint.aspx", function () {
    //Enter Credentials
    this.evaluate(function () {
        console.log("filling inputs");

        var usernameInput = document.getElementById("txtUsername");
        usernameInput.value = "user";

        var passwordInput = document.getElementById("txtPassword");
        passwordInput.value = "password";
    });
    this.click("#btnLogin");
    this.echo("login button was submitted");
});
casper.then(function () {
    this.capture('example.png');
});
casper.run();

This can be made even smaller by using casper.fillSelectors.