SlimerJS — A scriptable browser for Web developers

slimerjs

SlimerJS allows you to interact with a web page through an external JS script. It is useful to do functional tests, page automation, network monitoring, screen capture, etc.

webpage
  .open(url) // loads a page
  .then(function(){ // executed after loading
    // store a screenshot of the page
    webpage.viewportSize =
        { width:650, height:320 };
    webpage.render('page.png',
                   {onlyViewport:true});
    // then open a second page
    return webpage.open(url2);
  })
  .then(function(){
    // click somewhere on the second page
    webpage.sendEvent("click", 5, 5,
                        'left', 0);
    slimerjs.exit()
  });

Sounds familiar? It does:

SlimerJS is similar to PhantomJs, except that it runs Gecko, the browser engine of Mozilla Firefox, instead of Webkit (And it is not yet truly headless).

Also plays nice with CasperJS (1.1-beta)

SlimerJS →

CasperJS: a navigation scripting & testing utility for PhantomJS

CasperJS is an open source navigation scripting & testing utility written in Javascript and based on PhantomJS — the scriptable headless WebKit engine. It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks

Written on top of the previously mentioned PhantomJS

var links = [];
var casper = require('casper').create();

function getLinks() {
    var links = document.querySelectorAll('h3.r a');
    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('href')
    });
}

casper.start('http://google.fr/', function() { // search for 'casperjs' from google form
    this.fill('form[action="/search"]', { q: 'casperjs' }, true);
});

casper.then(function() { // aggregate results for the 'casperjs' search
    links = this.evaluate(getLinks);
});

casper.run(function() { // echo results in some pretty fashion
    this.echo(links.length + ' links found:');
    this.echo(' - ' + links.join('\n - ')).exit();
});

Also ships with a handful of tools to perform functional testing:

var casper = require('casper').create();

casper.start('http://www.google.fr/', function() {
    this.test.assertTitle('Google', 'google homepage title is the one expected');
    this.test.assertExists('form[action="/search"]', 'main form is found');
    this.fill('form[action="/search"]', {
        q: 'foo'
    }, true);
});

casper.then(function() {
    this.test.assertTitle('foo - Recherche Google', 'google title is ok');
    this.test.assertUrlMatch(/q=foo/, 'search term has been submitted');
    this.test.assertEval(function() {
        return __utils__.findAll('h3.r').length >= 10;
    }, 'google search for "foo" retrieves 10 or more results');
});

casper.run(function() {
    this.test.done(5); // checks that 5 assertions have been executed
    this.test.renderResults(true);
});

CasperJS →

If you want to use CasperJS from within Node, check out SpookyJS

PhantomJS: Headless WebKit with JavaScript API

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
page.settings.userAgent = 'SpecialAgent';
page.open('http://www.httpuseragent.org', function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {
        var ua = page.evaluate(function () {
            return document.getElementById('myagent').innerText;
        });
        console.log(ua);
    }
    phantom.exit();
});

Next to page automation, it also allows screengrabbing. A good use-case (as mentioned by Stephen Hay in his Fronteers ’12 talk) is including screenshots in generated style guides: change the CSS and automagically update the screenshots that go in the style guide by running Phantom

phantomjs rasterize.js https://www.bram.us/ bramus.pdf letter

PhantomJS →