PhantomJS/CasperJS -- continue execution after programmatically clicking button that reloads page

Question

I am attempting to automate a website on my remote server using PhantomJS.

For this website I have to log in with my username and password.

Examining the HTML, I see:

<form class="" method="post" action="https://foo.com/login/"
                               id="foo_login_bar" accept-charset="utf-8">
    <input tabindex="1" name="user_name" id="user" value="" type="text">
    <input tabindex="2" name="password"  id="pass" value="" type="password">
    <div class="wrapper_login_button">
        <input class="saved_url_for_login" name="login_url" 
           value="http://foo.com/" type="hidden">
        <input tabindex="3" id="login_button" class="btn left login_button" 
           name="login" value="Login" type="submit">
    </div>
</form>

So I try:

var page = require('webpage').create();

page.onConsoleMessage = function(msg) {
  console.log('CONSOLE: ' + msg);
};

page.open('http://foo.com', function(status) 
{
    console.log("Status: " + status);

    if(status === "success") 
        page.evaluate( bot );

    page.render('example.png');
    phantom.exit();
});

function bot()
{
    if( ! Foo.isLoggedIn() ) {
        console.log("Not logged in!");

        document.getElementById( "user" ).value = "myuser";
        document.getElementById( "pass" ).value = "mypass";

        document.getElementById( "login_button" ).click();
    }
}

Examining the screenshot shows that it has correctly entered text into the user and password fields, but it has failed to refresh the page.

i.e. If I fill out both fields and click the login button on Firefox, it takes me to my account homepage.

I'm guessing that what is happening here is that the code is immediately reaching the screenshot before the page has had a chance to reload.

How can I get execution to continue once the reload has completed?

EDIT: Phantomjs login, redirect and render page after pageLoad finishes

Answer 1

I'm guessing that what is happening here is that the code is immediately reaching the screenshot before the page has had a chance to reload.

You are absolutely right, you need to wait for the page to reload.

In PhantomJS you can register callback functions for when a page is done loading.

var page = require('webpage').create();
var action;

page.onLoadFinished = function(result)
{
    page.render('example' + (new Date()).getTime() + '.png');

    // Need to check `action` variable because 
    // this callback will also fire when opening page for the first time
    if(action == "loggin in") 
    {
         phantom.exit();        
    }
}

page.onConsoleMessage = function(msg) {
  console.log('CONSOLE: ' + msg);
};

page.open('http://foo.com', function(status) 
{
    console.log("Status: " + status);

    if(status === "success") 
    {
        action = "loggin in";
        page.evaluate( bot );
    }

});

function bot()
{
    if( ! Foo.isLoggedIn() ) 
    {
        console.log("Not logged in!");

        document.getElementById( "user" ).value = "myuser";
        document.getElementById( "pass" ).value = "mypass";

        document.getElementById( "login_button" ).click();
    }
}