Web Testing, Part III

An extremely powerful, but rarely used, technique to test Web applications’ functionality is to write test automation which exercises the app using the IE Document Object Model. Click on the image at the bottom of this entry to see what I mean. The image shows that I’ve written a test harness using HTML. There is a master HTML page which really is just a container for two frames; let’s call them left and right. The right frame houses the Web application under test. In this case it is a simple calculator app. The left frame houses a bit of UI for the test harness (a button to launch the automation, a text area to display messages and so on). The left frame also holds JavaScript code which manipulates the Web app in the right frame through the IE DOM. For example, one of the lines of code is:


parent.rightFrame.document.theForm.TextBox1.value = "7";


which simulates a user typing 7 into the first text box. The idea of this testing technique is simple in principle but the details are somewhat tricky. In particular, synchronizing the actions on the Web app is rather delicate. Explaining exactly how this Web testing technique works was one of the main motivators for me to write ".NET Test Automation Recipes" and I dedicate a chapter to all the details.


An advantage of testing a Web application through its UI using JavaScript to manipulate the IE DOM, compared with other testing strategies, are that the technique is relatively simple once you know the key tricks. A second advantage is that the technique does not require you to instrument or modify the Web app under test in any way — you use it exactly as is. A disadvantage of this technique is that because the IE DOM is specific to IE, you have to write separate scripts if you want to test your Web app on different clients such as Netscape Navigator.

This entry was posted in Software Test Automation. Bookmark the permalink.