eValid™ -- Automated Web Quality Solution Browser-Based, Client-Side, Functional Testing & Validation, Load & Performance Tuning, Page Timing, Website Analysis, and Rich Internet Application Monitoring. © Copyright 2000-2008 by Software Research, Inc.

Summary
This page presents eValid's solution to testing and validating the AJAX implementation methods used by Backbase, an AJAX-based development system. The script developed involves:

1. Navigation to the Backbase Explorer example.
2. Playback Synchronization within the AJAX DOM to assure reliable playback.
3. Navigation within the Backbase Explorer menu tree.
4. Validation of content/text on selected parts of the pages.
5. Return to the initial state (so that tests can be repeated).

Example Description

1. Starting Page
   Navigate go to the http://www.backbase.com/demos/explorer starting page, which appears as follows.

   

2. Choose Script Name
   Start the Recording, and choose the script name that eValid will use here "explorer"...

   

3. Select Tree Item
   Now, select a tree item [within the tree display] for detailed study. Here we have selected "Modal".

   

4. Confirm Selected Link Using Text Validation
   We can confirm that we have the right URL using a built-in eValid ValidateSelectedText command which is generated directly from the eValid GUI.

   

5. Clicking on Link Generates "View" Data Results
   Having clicked on the selected link, the application shows you the "Modal" page.

   

6. Confirm "View" Results Using Text Validation
   Now we confirm we have arrived at the right page by validating the text on the page with the built-in eValid command.

   

7. Preserve Idempotent State
   To make sure that the test does not leave the application in a different state than it was in at the beginning of the recording, we now carefully record navigating back to the original position. (This makes the test idempotent.)

   

8. Add Synchronization Command
   To assure reliable playback, we need to add a SyncOnSelectedObjProperty command to the script. This command will wait until a specified value of a specified property, found in a DOM element with specified attribute and value. First, we return to the starting page so we can look into its details.

   

9. Identify Synchronization Data
   To find the needed facts, we use the eValid PageMap to show us the desired properties. Now we can put that data into the AJAX synchronization command that you see in the script:

       SyncOnSelectedObjProperty 0 723 "innerHTML" "Welcome" "readyState" "complete" ""

   In this command eValid examines the page element which has the property "innerHTML" equal to "Welcome" and then waits for the same element's property "readyState" to equal "complete" before continuing playback (which has already happened in the PageMap example below because page loading is 100% complete). How often to check the value, and how long to wait before giving up, are both specified in the eValid playback preferences.

   

10. Final Script
    Here is the final eValid script for this example.

    # AUTOPLAY8==<uj-fs~w) # # Recording by eValid(TM) V8 # Copyright (c) 2008 by Software Research, Inc. # Recording made on: Microsoft Windows 2000 SP3 # ProjectID "Project" GroupID "Group" TestID "prof" LogID "AUTO" ScreenSize 1280 1024 FontSize 2 DeleteCache DeleteCookies InitLink "http://www.backbase.com/demos/explorer" # MANUALLY added/edited this syncing script command... SyncOnSelectedObjProperty 0 723 "innerHTML" "Welcome" "readyState" "co" \ "mplete" "" Wait 2370 ElementMouseDown 0 281 "" "Modal" "" Wait 190 ElementMouseUp 0 281 "" "Modal" "" ElementClick 0 281 83 322 "" "Modal" "" NAV # Validation command... ValidateSelectedText 0 770 0 "What was The Godfather about?" "" Wait 1040 ElementMouseDown 0 770 "" "What was The Godfather about?" "" Wait 1230 ElementMouseUp 0 770 "" "What was The Godfather about?" "" FollowLink 0 770 "What was The Godfather about?" "javascript:void(0);" "" NO_NAV Wait 1000 ElementMouseDown 0 898 "" "The Godfather is a film adaptation of the nov" \ "el of the same name (see The Godfather novel) written by Mario Puzo, dir" \ "ected by Francis Ford Coppola and starring Marlon Brando and Al Pacino. " \ "The film spans ten years from late 1945 to 1955 (after Don Vito Corleone" \ "'s death in 1954)." "" Wait 1100 ElementMouseUp 0 898 "" "The Godfather is a film adaptation of the novel" \ " of the same name (see The Godfather novel) written by Mario Puzo, direc" \ "ted by Francis Ford Coppola and starring Marlon Brando and Al Pacino. Th" \ "e film spans ten years from late 1945 to 1955 (after Don Vito Corleone's" \ " death in 1954)." "" ValidateSelectedText 0 898 66 "see The Godfather novel) written by Mario" \ " Puzo, directed by Francis Ford Coppola" "" # Closeout sequence... Wait 3525 ElementMouseDown 0 917 "" "Close" "" Wait 400 ElementMouseUp 0 917 "" "Close" "" ElementClick 0 917 702 462 "" "Close" "" Wait 3505 ElementMouseDown 0 56 "" "Welcome" "" Wait 191 ElementMouseUp 0 56 "" "Welcome" "" ElementClick 0 56 107 101 "" "Welcome" "" NAV # End of script.