eValid™ -- Automated Web Quality Solution Browser-Based, Client-Side, Functional Testing & Validation, Load & Performance Tuning, Page Timing, Website Analysis, and Rich Internet Application Monitoring.

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.

    # # Recording by eValid(TM) # (c) Copyright 2000-2012 by Software Research, Inc. # Recording made on: Microsoft Windows 2000 SP3 # ProjectID "Project" GroupID "Group" TestID "15-backbase" LogID "AUTO" ScreenSize 1280 1024 FontSize 2 DeleteCache DeleteCookies InitLink "http://www.backbase.com/demos/explorer" Wait 3573 ElementDblClick 0 111 50 7 "" "Demo & Download" "" Wait 4477 FollowLink 0 687 "Try the online demo" "http://www.backbase.com/go/demo-" \ "explorer" "" # MANUALLY added/edited this syncing script command... SyncOnSelectedObjProperty 0 723 "innerHTML" "Welcome" "readyState" "co" \ "mplete" "" # Traverse the tree... IndexSet 0 IndexFindElementEx 0 DOWN "name:innerText" "value:Windows & Dialogs" "name:tagName" "value:LABEL" "" IndexElementMouseDown 0 "" IndexElementMouseUp 0 "" IndexElementClick 0 "" Wait 2370 IndexFindElementEx 0 DOWN "name:innerText" "value:modal" "name:tagName" "value:LABEL" "" IndexFollowLink 0 "" Wait 2000 IndexFindElementEx 0 DOWN "name:innerText" "value:modal for element" "name:tagName" "value:A" "" IndexElementMouseDown 0 "" IndexElementMouseUp 0 "" IndexElementClick 0 "" Wait 5013 ElementFocus 0 964 "" "Blocked" "" Wait 2091 ElementDblClick 0 940 76 9 "" " Block this element below! " "" Wait 8112 # Validation command... ValidateSelectedText 0 965 1 "Content blocked!" "" IndexSet 0 IndexFindElement 0 DOWN "innerText" " Content blocked! " "" IndexMove -3 #IndexFindElement 0 DOWN "className" "btl-modal-closeButton btl-chameleon-highlightBackground btl-modal-closeButton-hover" "" IndexElementClick 0 "" # Closeout sequence... Wait 6934 ElementDblClick 0 443 24 8 "" "Windows & Dialogs" "" Wait 7317 ElementDblClick 0 31 26 7 "" "Welcome" "" # End of script.