personal web log written by izabeera and dryobates

casperjs

Sending forms and capturing screenshots with CasperJS

by izabeera

I had to make some GET/POST request on a website without an API, and then capture screenshot of the result. I was wondering about using Selenium, but one of the requirement was quick and simple installation on the production. My first choice was PhantomJS, but final (after better searching) I decide

What's CasperJS?

CasperJS was built on top of the PhantomJS, but has much simpler interface to web. It allows you in a convenient way filling and submitting forms, clicking links, capturing screenshots of a page etc. I used it to more advanced things, but I'll write about it other time :)

Installation

Installation is really simple and fast. The only casperjs installation requirement are phantomjs and python. More details you can find on the project's site: http://docs.casperjs.org/en/latest/installation.html.

First steps with CasperJS

Bellow is a very simple example of filling form and capturing screenshot. I hope it'll help you get started with this great tool.

Get started

//example.js file

var casper = require('casper').create({
    verbose: false,
    logLevel: 'debug'
});

casper.start('http://google.com', function(){
    this.echo('Open ' + this.getTitle());
});

casper.run();

Filling form

In next step we will fill fields on google.com and send form.

//example.js file
var casper = require("casper").create({
    viewportSize: {
        width: 1280,
        height: 800
    }
});

casper.start("http://google.com/", function() {
    // search for 'Einstein' from google form
    this.echo('Open ' + this.getTitle());
    this.fill('form[action="/search"]', { q: "Einstein" }, true);
});

casper.run();

You have two ways to send forms. The first one you have seen in the above example. Setting last param (“submitting”) to “true” on the fill function makes automatic form submission. The other is using this.click() or this.clickLabel() functions.

Capture screenshot

In order to capture screenshot you can choose from one of the three functions: caputre, caputureBase64 and caputerSelector. For me the best was the last one.

//example.js file
var casper = require("casper").create({
    viewportSize: {
        width: 1280,
        height: 800
    }
});

casper.start("http://google.com/", function() {
    // search for 'Einstein' from google form
    this.echo('Open ' + this.getTitle());
    this.fill('form[action="/search"]', { q: "Einstein" }, true);
});

casper.run(function() {
    // You can select which part of page will be captured. 
    //  You can give any css selector as second parameter
    // e.g. #id, tag (I use html tag)
    this.captureSelector('example.jpg', 'html');
    this.echo('Screenshot was made.');
    this.exit();
});

Run script

You can run script form console by command:

casperjs example.js

Finall example

You can also give parameters on the command line, but you must remember about making appropriate changes in the script (like in example below).

//example.js file
var casper = require("casper").create({
    viewportSize: {
        width: 1280,
        height: 800
    }
});

/* read parameters given from command line */
var url = casper.cli.get(0);
var filename = casper.cli.get(1);

if (casper.cli.args.length < 2) {
casperjs.echo('Using $casper example.js <url> <filename>').exit(1);
}

casper.start(url, function() {
    // search for 'Einstein' from google form
    this.echo('Open ' + this.getTitle());
    this.fill('form[action="/search"]', { q: "Einstein" }, true);
});

casper.run(function() {
    this.captureSelector(filename, 'html');
    this.echo('Screenshot was saved as ' + filename);
    this.exit();
});

And:

casperjs example.js 'http://google.com' screen.jpg

That's all in this first installment. Enjoy it!

izabeera
izabeera
Iza Kartowicz-Stolarska. IT engineer. I work in programming since 2005. During this time I gained wealth of experience in writing web applications... and loved Python and Vim :) I enjoy working with people which have positive attitude to the world. Email: iza@stolarscy.com

Archive

Tag cloud