Automated Testing using JavaScript

How to run automated tests and take screenshots using JavaScript libraries such as PhantomJS and DalekJS.
Automated testing has many advantages:

- Boring or repetitive tasks are taken care of
- Once set up, tasks can be reused again and again
- Fewer chances of mistakes a manual tester could miss
- Cover more tests in a shorter time

One of the biggest disadvantages is that takes time to write tests that cover all the features. Especially in the web world where products and sites change faster, with the tests going quickly out-of-date. Traditional automated testing has been written in Java using Selenium, with some developments into Python based libraries. These need specialist knowledge to write and develop and deploying these tests is a huge task, usually requiring a build server like Jenkins.

JavaScript to the rescue! Now we have a set of tools which allow us to not only do everything within automated testing, but to write the tests quickly using JavaScript and run them instantly.

PhantomJS
This allows you to run a webkit browser, load a url, perform tests, screenshots and trigger input.

DalekJS
This allows you to open multiple browsers (Chrome, Webkit, Firefox, iOS, IE) and run tests on them.

Some of the features are not fully complete yet, but these libraries are speeding up the time it takes to write and run tests, and for developers you can setup the test before-hand.

I've written an example using DalekJS which inputs data into a form, submits it and screenshots the result. This test is run in 4 browsers using Grunt:

module.exports = {
    'Page title is correct': function (test) {
        'use strict';
        test
            .open('http://localhost:8888/dalekjs-crossbrowser/src/')
            .assert.title('This is the page title')
            .type('#name', 'Bob Waters')
            .screenshot('test/results/index_:browser_:version.png')
            .submit('#formexample')
            .screenshot('test/results/submit:browser_:version.png')
            .done();
    }
};

You can check out the working code here:
https://github.com/kmturley/dalekjs-crossbrowser