clientutils_contents.md

Casper ships with a few client-side utilities which are injected in the remote DOM environment, and accessible from there through the __utils__ object instance of the ClientUtils class of the clientutils module.

Note These tools are provided to avoid coupling CasperJS to any third-party library like jQuery, Mootools or something; but you can always include these and have them available client-side using the Casper.options.clientScripts option.

ClientUtils#encode(String contents)

Encodes a string using the base64 algorithm. For the records, CasperJS doesn't use builtin window.btoa() function because it can't deal efficiently with strings encoded using >8b characters.

var base64;
casper.start('http://foo.bar/', function() {
    base64 = this.evaluate(function() {
        return __utils__.encode("I've been a bit cryptic recently");
    };
});

casper.run(function() {
    this.echo(base64).exit();
});

ClientUtils#exists(String selector)

Checks if a DOM element matching a given CSS3 selector exists.

var exists;
casper.start('http://foo.bar/', function() {
    exists = this.evaluate(function() {
        return __utils__.exists('#some_id');
    };
});

casper.run(function() {
    this.echo(exists).exit();
});

ClientUtils#findAll(String selector)

Retrieves all DOM elements matching a given CSS3 selector.

var links;
casper.start('http://foo.bar/', function() {
    links = this.evaluate(function() {
        var elements = __utils__.findAll('a.menu');
        return Array.prototype.forEach.call(elements, function(e) {
            return e.getAttribute('href');
        });
    };
});

casper.run(function() {
    this.echo(JSON.stringify(links)).exit();
});

ClientUtils#findOne(String selector)

Retrieves a single DOM element by a CSS3 selector.

var href;
casper.start('http://foo.bar/', function() {
    href = this.evaluate(function() {
        return __utils__.findOne('#my_id').getAttribute('href');
    };
});

casper.run(function() {
    this.echo(href).exit();
});

ClientUtils#getBase64(String url[, String method, Object data])

This method will retrieved a base64 encoded version of any resource behind an url. For example, let's imagine we want to retrieve the base64 representation of some website's logo:

var logo = null;
casper.start('http://foo.bar/', function() {
    logo = this.evaluate(function() {
        var imgUrl = document.querySelector('img.logo').getAttribute('src');
        return __utils__.getBase64(imgUrl);
    };
});

casper.run(function() {
    this.echo(logo).exit();
});

ClientUtils#getBinary(String url[, String method, Object data])

This method will retrieved the raw contents of a given binary resource; unfortunately though, PhantomJS cannot process these data directly so you'll have to process them within the remote DOM environment. If you intend to download the resource, use ClientUtils.getBase64() or Casper.base64encode() instead.

casper.start('http://foo.bar/', function() {
    this.evaluate(function() {
        var imgUrl = document.querySelector('img.logo').getAttribute('src');
        console.log(__utils__.getBinary(imgUrl));
    };
});

casper.run();

Warning You won't be able to pass the binary string from the remote DOM environment to PhantomJS' one. For retrieving binary contents, use ClientUtils.encode().

ClientUtils#visible(String selector)

Checks if an element is visible.

casper.start('http://foo.bar/', function() {
    if (this.visible('#cain')) {
        this.echo("I CAN SEE YOU");
    }
});

casper.run();