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
The simple AJAX Autocompleter demo represents a "perfect storm" of sophisticated AJAX page properties. Testing them thoroughly efficiently demonstrates how to approach test design with eValid facilities.

About The Application
This page has a very simple, but quite sophisticated, AJAX feature. As you type individual letters into the "Just a little test:" area (see the picture below) the internal implementation searches a backend database and suggests possible results for you. These show up in a drop-down list on the screen, automatically, after a few seconds (while the backend database looks up the information).

As you type in more and more letters the response after every keystroke is a new list, updated to contain only the matching responses. Adding characters that "don't match" also updates the data (you may not see a change visibly, but it is being done).

To test this page you need all of the following kinds of features:

• Locate the text input area and type letters into it.
• Synchronize the script to wait until AFTER the AJAX work with the back end database is done.
• Choose the final selection (which may NOT be the topmost one in the drop-down list you're shown).
• Validate that the selection you made shows up in the input window.

As the script below shows, all of this work is done with index motion commands that manipulate the DOM and with special AJAX synchronization logic that waits until the backend database work is completed by sensing a signal inside the page.

About the Script
The eValid script performs these steps (see the script, which has been annotated to correspond to these numbers):

1. Navigate to the Autocompleter demo page and wait for it to be ready. Synchronization here relies on eValid's built in page synchronization.

2. Find the place on the page to type data in. This is a DOM element with id = contact_name. Then, type in the three letters: A, n, and t. This is done with an IndexFindElement command that searches for the contact_name DOM element. After it is found the next two commands type in Ant and then press the Enter key.

3. Wait for the AJAX interaction to complete and provide a list of alternative names. Here the need is to sense internally when the AJAX work is done, and this is accomplished in two steps, first pending the appearance in the page of an element with id = contact_name_auto_complete, and then to confirm that at least some results were found with a search for an element with zIndex = 2.

4. Select "Antonio Edgar" as the final choice. The script does this by finding the tagName = UL, then locating the innerText = Antonio Edgar, locating the autocompleteIndex = 3 position, and clicking on that element.

5. Validate that this selection is remembered inside the web page. This is done with a DOM confirmation that the element with id = contact_name has value = Antonio Edgar.

6. The script:

   # Recording by eValid(TM) # Copyright (c) 2000-2012 by Software Research, Inc. # Recording made on: Microsoft Windows 2000 SP3 ProjectID "Project" GroupID "Findex" TestID "scriptaculous" LogID "AUTO" ScreenSize 1280 1024 FontSize 0 DeleteCache DeleteCookies # Step 1 InitLink "http://demo.script.aculo.us/ajax/autocompleter" # Step 2 IndexFindElement 0 DOWN "id" "contact_name" "" IndexInputValue 0 "TEXT" "Ant" "" "" IndexElementEvent 0 "onkeypress" "" "" "" # Step 3 SyncOnElementProperty 0 "id" "contact_name_auto_complete" "" SyncOnElementProperty 0 "zIndex" "2" "" # Step 4 IndexFindElement 0 DOWN "tagName" "UL" "" IndexFindElement 0 DOWN "innerText" "Antonio Edgar" "" IndexFindElement 0 DOWN "autocompleteIndex" "3" "" IndexElementClick 0 "" # Step 5 ValidateSelectedObjProperty 0 0 "id" "contact_name" "value" "Antonio Edgar" "" # End of script.

Example Operation
Here is a step by step illustration of the operation of the script, showing the screen state after every step:

1. Starting Page Navigation complete
   

   

2. Text Entry Completed
   

   

3. AJAX Response Synchronization Complete
   

   

4. Selection of Item From Drop-Down List
   

   

5. Vaildation of Content of Text Box