Logging in to Phantomjs, redirecting and displaying the page after the Load page completes

Question

I have a website with a login form. If the user is not registered and tries to access the internal page, he will be redirected to the default page. For example, if I try to access http://siteURL.PhantomPrint.aspx I will be redirected to http://siteURL/Default.aspx?ReturnUrl=PhantomPrint.aspx. And after entering the page, a redirect will be automatically sent.

After redirecting, I want to display the page using Phantomjs and save it in pdf format. The problem is that the rendering is done before the page loading is completed, and I can display the page correctly only if I use timeouts. In this case, if the page loading takes longer than usual, the resulting pdf file is not correct.

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 you that rendering is only done after the redirected page finishes loading is welcome.

Answer 1

It looks like you want to handle the navigation steps. You will need to use page.onNavigationRequested to select whether the page load / redirect has been selected. This is likely to be difficult to maintain. You will also have to give up the idea of ​​using an array of steps with setInterval .

Another possibility is to specifically wait for any selector present on the landing page to waitFor , but again, this will make it impossible to use setInterval .

---

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 select the page load and wait until the page has finished loading before making a 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 done even less using casper.fillSelectors .

Answer 2

After further research, I found a solution, see code below.

 var loadInProgress = false; page.onLoadStarted = function () { loadInProgress = true; console.log("load started"); }; page.onLoadFinished = function () { loadInProgress = false; console.log("load 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(); } }, 100) 

But I would like to know if there is another solution that would not include a recursive function call.