CasperJS script to authenticate and store persistent cookie through profile for SlimerJS

casperjs_authenticator.js

/*
 * 
 * This is a CasperJS script.
 * 
 * It try to authenticate so the session cookie can be stored in current profile 
 * and then BackstopJS+CasperJS+SlimerJS can use the same cookie during tests.
 * 
 * Scenario
 * ========
 * 
 * 1. Create an empty Gecko user profile;
 * 2. Use this script to authenticate:
 *    2.1. Go to login page;
 *    2.2. Submit form with correct login+password;
 *    2.3. Go to some dashboard to valid authentication;
 * 3. Use Gecko user profile with BackstopJS (with SlimerJS);
 * 4. Profit.
 * 
 * Usage
 * =====
 * 
 * Init Gecko user profile
 * -----------------------
 * 
 *     xvfb-run slimerjs -CreateProfile MyFunnyProfile
 * 
 * (or without xvfb-run if you dont use it)
 * 
 * Authenticate once
 * -----------------
 * 
 *    casperjs --engine=slimerjs -P MyFunnyProfile --verbose --log-level=debug casperjs_authenticator.js
 * 
 * Use the same profile name to be able to keep and use the cookie session 
 * persistently. This may be used just once because the session cookie will 
 * live for some time until expiration.
 * 
 * Using profile with BackstopJS
 * -----------------------------
 * 
 * Once authenticated with this casperjs script, the cookie session is 
 * registered in your profile, you just need to configure option 'casperFlags' 
 * in your 'backstop.json' file to give it the profile name to use with SlimerJS:
 * 
 *    "casperFlags": [
 *        "--engine=slimerjs",
 *        "-P MyFunnyProfile"
 *    ],
 * 
 * BackstopJS will pass arguments to CasperJS that will pass it to SlimerJS 
 * that will be able to use the profile during tests.
 * 
 * Notes
 * =====
 * 
 * This code should be almost compatible with PhantomJS engine too, but 
 * i didn't tested it. Also, with PhantomJS don't user profile, instead it use 
 * persistent cookie through a text file, see its command line documentation.
 * 
 * So process with PhantomJS engine should be almost the same but using the 
 * persistent cookie file argument instead profile argument.
 * 
 */
var casper = require('casper').create(),
    viewport = {'width': 1440, 'height': 800},
    pause_time = 5000,
    screenshot_filename = "casperjs_authenticator.png",
    page_account_url = "http://192.168.0.103:8001/dashboard/",
    page_login_url = "http://192.168.0.103:8001/accounts/login/",
    account_username = "your_username",
    account_password = "your_password";

// Return text content from the last 'h1'
function get_page_title(){
    return jQuery("h1").last().text();
}

/*
 * Open the page and set the viewport
 */
casper.start(page_login_url, function(response) {
    var title = casper.evaluate(get_page_title);
    this.echo("Page title: "+title, 'INFO');
    
    this.viewport(viewport.width, viewport.height);
    this.echo("Fixed viewport to: "+viewport.width+"x"+viewport.height, 'INFO');
});

/*
 * Capture page before login
 */
casper.then(function() {
    var screenshot = "1."+screenshot_filename;
    
    this.capture(screenshot, {
        top: 0,
        left: 0,
        width: viewport.width,
        height: viewport.height
    });
    this.echo("Taken screenshot to: "+screenshot, 'INFO');
});

/*
 * Login in then screenshot again for curiosity
 */
casper.then(function() {
    this.echo("Attempt to login", 'INFO');
    
    this.fill('form.simple', {
        'username': account_username,
        'password': account_password
    }, true);
    this.echo("Should be logged as: "+account_username, 'INFO');
});

/*
 * Check login is ok
 */
casper.thenOpen(page_account_url, function() {
    this.echo("Check login", 'INFO');
    
    var screenshot = "2."+screenshot_filename;
    
    this.capture(screenshot, {
        top: 0,
        left: 0,
        width: viewport.width,
        height: viewport.height
    });
    this.echo("Taken screenshot to: "+screenshot, 'INFO');
});

casper.run();