Title:       WebReplay2.1
Author:      Emmanuel KARTMANN
Email:       emmmanuel@kartmann.org
Environment: None
Keywords:    Web Automated Testing Replay
Level:       Intermediate
Description: This article presents an automated software testing tool for Web Applications (Internet/Intranet) based on Internet Explorer
Section      General
SubSection   Internet & Network

Click to enlarge

Introduction

Web Replay 2 is an automated software testing tool for Web applications. It helps in detecting bugs and regressions in Web applications by replaying scenarios to test the application.

Using WebReplay 2, you can automatically navigate to a Web page, fill in form fields, click on the submit (OK) button, and then continue to another Web page.

To use Web Replay 2, build a Javascript Scenario File (see below), type the name of the file in the edit box and click on the Replay button.

Background

Web Replay 2 is based on Microsoft's Internet Explorer 6.0, DHTML Behaviors and Javascript (unlike Web Replay 1 that was implemented in C++/COM).

Web Replay 2 uses a FRAMESET with a DHTML behavior attached to the onload event of the bottom frame to execute some javascript code to play back a scenario. It's implemented in script only (client-side Javascript running in Internet Explorer and server-side Javascript running in ASP pages)

As a consequence, Web Replay 2 gives you full access to the Microsoft Internet Explorer Document Object Model (DOM) within your scenario files. And since the scenario is a Javascript program, you can implement virtually any test case.

Using function WebReplay_Navigate(), you can call server-side code to implement pre-condition and post-conditions on your test cases (e.g. setting up a database or checking that created/modified records are correct).

Using the code

Web Replay provides the following features:

A Javascript Scenario file consists in a definition of a function named WebReplayScenario(); it looks like this:

function WebReplayScenario()
{
  switch (gintState)
  {
    case 0:
      // Open a web page (LOCALHOST only due to cross-site scripting limitations)
      WebReplay_Navigate("http://localhost/WebReplay2/WebReplay2Scenario1_step1.asp");
      break;

    case 1:
      // Type in some text in a form field
      WebReplay_SimulateTextInput("Text1", "NewValue1");
      break;

    case 2:
      // Submit form by clicking on a submit button
      WebReplay_SimulateHTMLElementClick("OK");
      break;

    default:
      // Automatically exit from scenario
      WebReplay_SetStateNext(-1);
      break;
  }
}

This function implements a state-machine based on global variable gintState; everytime the requested action is successful (e.g. clicking on a button), the state is increased by 1 (state starts at 0).
State is set to -1 when scenario is finished. In case of error, state is set to -2.

The utility function WebReplayScenarioAuto() can ease the process of building scenario - its input is a simple array of states (the state-machine is already implemented - no need to manage the switch and state numbers):

function WebReplayScenario()
{
   WebReplayScenarioAuto(
     [
       // State 1: Navigate to the test Page (uses an anonymous function definition)
       [ null, function () { WebReplay_Navigate("http://localhost/WebReplay2/WebReplay2Scenario1_step1.asp") } ], 

       // State 2: Type in some text in a form field named Text1
       [ "Text1", "NewValue1" ], 

       // State 3: Submit form by clicking on a submit button named "OK"
       [ "OK" ], 

       // State 4: Type in some text in a form field named Text21
       [ "Text1", "NewValue2" ], 

       // State 5: Submit form by clicking on a submit button named "OK"
       [ "OK" ], 

       // State 6: Wait for next page's title: <h2>Form Submit Debugger</h2>
       // Set state to -1 (end) when the control is found.
       [ null, function () { WebReplay_WaitForHTMLControl("h2", "innerText", "Form Submit Debugger", -1) } ]

     ]
   );
}

A complete Javascript SDK is available to build scenario files; and of course, you can extend the SDK with your own Javascript code...

To build a scenario file, you need to basically know the names (or ids) of HTML Elements within your Web Application (using function WebReplay_FindHTMLControlWithName).
Alternatively, you can use the content (text) of a control to interact with it (using functions WebReplay_FindAnchorWithText, WebReplay_FindButtonWithText, or WebReplay_FindHTMLControlFromText).

You can interact with HTML Controls with 3 functions:

Points of Interest

Although it's a complete re-write (v2.1 has nothing to do with Web Replay v1.0), the TODO list is still long:

Web Replay 2 TODO List

  1. Automated recording of scenario files
  2. Play scenarios multiple times (even infinite loops to stress-test your Web application)
  3. Batch playback of scenario files
  4. Support authentication (NTLM, basic, https) and multiples login accounts
  5. Support FRAMES (multi-frame documents) or top-FRAME Web sites.
    Some Web sites, like www.codeproject.com, use a piece of Javascript to make sure that they are viewed within a top-level frame; Web Replay 2 is incompatible with those sites...
  6. Use event log file (csv format?) for errors/tracing/debugging
  7. Support complex dialog boxes (based on methods window.open, window.showModalDialog and/or window.showModelessDialog)

History

V2.1 - $Date: 2005-08-19 08:09:13 +0200 (ven., 19 août 2005) $