Surfnet logo

Test-Driven Development of Graphical User Interfaces

This is a completed project.


Test-Driven Development (TDD) is a software development methodology in which tests are written before the code they verify. Only one test should fail at a given time, which makes the goal of TDD returning the system to a state where all tests pass. Thus tests drive development of the system. Not only does this methodology clearly define when we are done with a feature (the new tests – as well as all of the old ones – pass), but it also builds up a suite of regression tests. These tests will be able to detect when regression errors get introduced during coding later on.

TDD of a GUI-based application, however, is more complex. While it’s possible to write tests manually before the GUI itself is developed, this requires detailed knowledge of the GUI before it has actually been defined. Due to this limitation, we looked for a way to leverage the widely-used concept of capture/replay testing in TDD of graphical user interfaces (UITDD).

In our approach, an automated prototype is created using a program like ActiveStory Enhanced or SketchFlow. This prototype should be used in iterative usability evaluations to catch usability errors before effort is spent on coding the actual interface. After this process, tests can be recorded from interactions with the automated prototype in the same way as they would be recorded from an actual GUI using a capture/replay tool like LEET. As long as keyword-based testing – a process in which only a single name or identifier is used to determine which widget to interact with – is used, and as long as the same identifiers are assigned to widgets in the actual GUI as they are to their analogues in the prototype, the tests can be replayed on the actual GUI. Thus, our method allows capture/replay tools to be used for UITDD, and also encourages the integration of usability evaluations into the design process.

In future work, we aim to support TDD of a broader range of interactions – including gestures and uniquely surface-based interactions.


Images and Videos

LEET used in conjunction with SketchFlow:


A diagram of the process of UITDD. Clockwise from top: a prototype of the GUI is used to generate automated C# tests, which are used to develop the actual GUI.


Tedd’s Tool (the precursor to LEET) used in conjunction with ActiveStory Enhanced


Demos and Software Components

For more information on LEET, see our SurfNet page here, or our project homepage on CodePlex here.

For more information on ActiveStory Enhanced, see our SurfNet page here, or our project homepage on CodePlex here.

SketchFlow is part of Microsoft’s Expression Studio, and more information can be found here.



UITDD is part of the development process for the TableNOC application in conjunction with Ivrnet, Inc. TRLabs is providing funding for Theodore D. Hellmann.