Description:

One of the great untapped advantages of using jQuery to build web applications is that it becomes very easy to do the two things needed for UI test automation:

1. Simulate basic user activity (mouse and keyboard events).
2. Assert that the UI reacts appropriately by probing the DOM for structure and CSS properties like visibility.

For my employer eBuddy (www.ebuddy.com) I've written a basic framework that allows us to easily write tests for our new web based IM client (web.ebuddy.com). These tests are written in JavaScript and run completely in the browser. It is my plan to clean up the code a little bit and release it as an open source project to the jQuery community.

In my talk I would like to briefly discuss the two main facets of automated testing in general (unit testing vs. GUI testing) and show some of the strategies we used at eBuddy to test the UI of the application. Although the things we test are of course very specific to our domain (instant messaging), I believe the problems we encountered and the hurdles we've taken will be familiar to many developers working on web application front-ends. Some of these hurdles would be:

• Removing backend dependencies: To really test the UI code, dependencies on the backend should be avoided as much as possible. One way to achieve this is by intercepting Ajax requests. This can be done by overwriting the jQuery.ajax function with a custom handler. Once this is done, you can test how the UI reacts to any response sent by the server: exotic errors, invalid messages, or just plain success.
• Dealing with asynchronous UI actions: In many cases, the UI won't directly respond to a user action. Sometimes it waits for a server response, sometimes for an animation to finish or for a timeout to run. The test framework allows you to wait for specific events to happen or for a certain condition to be true before the tests are run.