PhantomJS

CasperJS

&

Other Automated Testing Tools

PhantomJS

What is it?

Headless version of Webkit
Window-less, command line web browser
Programmable through JavaScript
Supports WebDriver out of the box

PhantomJS

How do I get it?

Install Node.js
sudo npm install -g phantomjs
(http://phantomjs.org/)

PhantomJS

How do I use it?

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

page.open('http://www.google.com/', function (status) {
    // Page is loaded. Output content.
    console.log(page.content);
    phantom.exit();
});

> phantomjs myscript.js

PhantomJS

What else can I do?

Inject/execute arbitrary JS code
Perform actions
Take screenshots
Monitor performance

PhantomJS

That’s nice, but I’m interested in testing...

PhantomJS is not a test framework. It’s the browser.
But there are LOTS of frameworks available
Mocha, Karma, Jasmine, & many more (check website)
WebDriver support built in via --webdriver=PORT
CasperJS!

CasperJS

What is it?

API & test framework layer on top of PhantomJS
Provides all the things you’re used to:
Clicking, Typing, Waiting, Assertions, etc.
Events, screenshots (even specific elements), & more.

CasperJS

How do I get it?

Install Node.js
sudo npm install -g casperjs
(http://casperjs.org/)

CasperJS

How do I use it?

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

casper.start('http://google.com/', function() {
    this.fill('form[action="/search"]', { 'q': 'ghost' });
    this.click('#gbqfba');
});

casper.then(function() {
    this.echo(this.getTitle());
});

casper.run();

> casperjs myscript.js

CasperJS

How do I use it?

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

casper.test.begin('Google tests', 1, function(test) {
    casper.start('http://www.google.com/', function() {
        test.assertTitleMatch(/Google/, 'Title contains Google');
    }).run(function() {
        test.done();
    });
});

> casperjs test myscript.js

Advantages of PhantomJS/CasperJS

High speed, low resources
No need for VMs or external services
Self-contained command line application
Don’t have to worry about cache/cookies

Disadvantages of PhantomJS/CasperJS

Lack of ecosystem!
1 version of webkit, and that’s it (and not even the latest)
Good option for smoke testing (specifically JavaScript functionality), but not comprehensive testing.

How do we solve this?

Headless versions of other browsers?
Already underway:
- SlimerJS - Gecko/Firefox engine (Supported by CasperJS!)
- TrifleJS - Internet Explorer (For real? I think so...)

Moving Beyond Browsers:

Visual Regressions

Developer botches a stylesheet
Page “works” but is visually broken
How do we catch this? Not as simple as pass/fail.
A place to start: Awareness via screenshot comparison

Visual Regression Tools: ImageMagick

Common open graphics package
Comes with “compare” tool for diff’ing images

Visual Regression Tools: ImageMagick

> compare -metric rmse form-1.png form-2.png output.png
5831.19 (0.0889782)

(0.0889 = 8.89% change)

Visual Regression Tools: Others

PhantomCSS
Huxley (Facebook)
Wraith (BBC News)
Hardy (Not screenshot-based, tests style assertions)
SiteEffect.io (Screenshot + DOM to negate whitespace/offset issues)

Information

Justin Klemm

@justinklemm

jwklemm@gmail.com

Ghost Inspector

http://www.ghostinspector.com