PhantomJS Login and Page Redirect

Question

I am trying to crawl a website which kind of have a login page seperated and jumping homepage after login. Here is my code, but I am not accomplishment jumping homepage:

var page = require('webpage').create() ;
var login = 'https://webstie.com/login' ;
var home = 'https://website.com/home' ;

page.open(login, function (status) {
    if (status !== 'success') {
        console.log('fail!');
    } else {
        page.evaluate(function(){
            function timer (f,n) {
                var i = 0 ;
                var t = setInterval(function(){
                    if (n < i) {
                        clearInterval(t) ;
                        f() ;
                    }
                    i++ ;
                },50) ;
            }
            $("input[name=email]").val("user") ;
            $("input[name=password]").val("pass") ;
            $("input[type=submit]").click() ;
            timer(function(){
                document.location.href = home ;
                timer(function(){
                    $('body').css('border','1px solid red') ;
                },100) ;
            },100) ;
        }) ;
        page.render('page.png') ;
    }
    console.log('finished!') ;
    phantom.exit() ;
});

Solution

You forgot to wait for asynchronous processing. Your timer() function is asynchronous, because setTimeout() is asynchronous. That is why your page.render() call happens actually before the timer() has run. The same goes for phantom.exit().

But you don't want to use document.location.href = home, because then you need to listen to the page open event. You can do this in an integrated fashion with another page.open().

Try:

page.open(login, function (status) {
    if (status !== 'success') {
        console.log('fail!');
        phantom.exit(1);
    } else {
        page.evaluate(function(){
            $("input[name=email]").val("user") ;
            $("input[name=password]").val("pass") ;
            $("input[type=submit]").click() ;
        });
        setTimeout(function(){
            page.open(home, function(status){
                if (status !== "success") {
                    console.log('fail2');
                    phantom.exit(1);
                    return;
                }
                page.evaluate(function(){
                    $('body').css('border','1px solid red') ;
                });
                page.render('page.png');
                console.log('finished!');
                phantom.exit();
            });
        }, 500);
    }
});

Use waitFor() for more robust waiting for a specific condition or use the page.onCallback and window.callPhantom() pair.