View on GitHub

Transition.js 2.0

Detangled in-Browser Webapp Testing

Download this project as a .zip file Download this project as a tar.gz file


Transition.js is an in-browser testing framework designed to make testing asynchronous web applications easier.

I had the following goals when I created Transition.js:

A First Example

Transition.js comes with an example application, Engineyard’s Todo App in Sinatra. There is a small test suite which tests the Todo application.

This test adds a Todo List and asserts that it is visible:

/*jslint browser: true, maxerr: 50, indent: 2, nomen: false, regexp: false, newcap:false */
/*global window, jQuery, _, Backbone, console, Transition */
"use strict";

(function () {
    name: 'Add a List',

    states: [
      this.newState('init', this.navigateTo_('/'))
        .to('deleteTestList').when('li a:contains("Test")')
        .to('mainPage')      .when('!li a:contains("Test")'),
      this.newState('deleteTestList', 'deleteTestList')
        .to('deleteTestList').when('li a:contains("Test")')
        .to('mainPage')      .when('!li a:contains("Test")'),
      this.newState('mainPage', this.navigateTo_('/'))
        .to('createList')    .when('input[name="list[name]"]:visible'),
      this.newState('createList', 'createTestList')
        .to('success')       .when('li a:contains("Test")')

    deleteTestList: function () {
      var old = parent.frames.main.confirm;
      parent.frames.main.confirm = function () {
        return true;
      parent.frames.main.confirm = old;

    createTestList: function () {

Ready to get started?

Begin with the installation instructions then browse the Documentation.