Sebastian Golasch (@asciidisco) was talking about automated UI testing at Scotland.js, these are my notes from his talk.

Lets talk about UI testing

Testing is a fairly standard topic these days but not UI testing. We need to automate the UI testing so that it's repeatable.

The theory: iframe injection and synthetic events. Add an iframe that loads the page to be tested and the scripts to be tested. (Need to disable same origin policy (but not in IE and FF).) Can't we just make a framework and go to lunch?

A click is not a click is not a click. If we trigger a click event it won't fire the mousedown event. There are nine events that fire as part of a click:

• mouseenter
• mouseover
• mousemove (n times)
• mousedown
• mouseup
• click
• mousemove (n times)
• mouseleave
• mouseout

This is easy to fake but clicks are easy. <select> is hard even before you put in cross browser compatibility.

This is not the way to write your tests so we exterminate this solution.

The crux of time travel is that we've been here before. With Java. And they went in the wrong direction. For desktop applications there were solutions that used applications and then replayed it back - Selenium 1, quick and dirty. Don't force front end devs to learn a new language, it's too complicated.

Webdriver was developed as Selenium 2. Defines a RESTFUL interface to the browser. Based on the JSONWIRE protocol and It's now a W3C spec.

We use Phantom.js which is a WebKit browser that runs in your terminal. We can use GhostDriver to control Phantom.js using Node.js. However, this is just one browser and none of our users use it! It is very fast though so can be used as part of the dev process.

What do we need?

• Tests should be written in JS - front end devs are already writing in JS.
• Average developer should be able to use it.
• Works on all browsers
• Hook into Selenium bindings
• In browser runner - a lot of front end devs are afraid of the command line.
• Command line runner - more advanced devs want to use the power of the command line.
• Should be as easy as jQuery.

There doesn't seem to be a tool that does all that so I decided to write a tool myself: Dalek.js. Still a prototype - rough and fucked up. First release expected in a month or so.

Dalek.js Spoliers

• Installable by npm (not yet)
• jQuery like syntax - tests chain and use query selectors.