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

Introduction
This short scripting example investigates how eValid can be used to validate the AJAX autocomplete function in a popular search engine. The script shown below operates as follows:

1. Introduce a partial string into the text area, for example evali.
2. Capture the contents of the DOM after the AJAX activity has provided some suggested auto-completions.
3. Confirm that a required string, for example evaline, is present within the available suggestions presented by the autocomplete feature.
4. Complete the input and press RETURN to generate the search results.
5. Confirm that the search found the required page.

The goal of the script is to confirm that, among all of the possible suggested completions for evali, that the target evaline string is among the options presented. If this validates OK, then the AJAX autocomplete function is OK because its results confrom with known (expected) data.

Sample Screen
Here is a sample of the Google search input page that shows the display after typing in evali -- which includes a set of suggested completions.

Screenshot showing example autocomplete suggestions

Example Script
The script shown below, which was first recorded "from life", using eValid's "out of the box" settings. The script was then modified manually to illustrate the use of DOM processing commands to execute the test plan and verification procedure described above.

After identifying the correct sourceIndex at which to do the partial text insertion, the script waits 1 second (more than enough time for the browser DOM to fully stabilize) and then confirms that the required reference to evaline is present in the autocomplete suggestions that are currently shown on the page, using a MatchString command. Note that the page has been refreshed to include the required string in the actual HTML of the page, which auto-refreshes.

As a secondary confirmation and more exact confirmation, the script issues an IndexFindElementEx regular expression search command to search for the specific SPAN sequence that contains the text that is represented on the screen. Hence, the command's arguments specify two matches:

1. The value evaline appears in some element's innertext: property; and,
2. that value:SPAN appears as the value of a name:tagName reference.

Then, the script clicks on that choice and analyzes the resulting page that is retrieved from that action.

# This script demonstrates eValid's ability to check AJAX autocomplete # functionality. # ProjectID "Examples" GroupID "DOM" TestID "auto.val" DeleteCache DeleteCookies # Navigate to a site known to have an autocomplete function # implemented on an input field... InitLink "http://www.google.com/" # Type in "evali" to let the autocomplete function make some # suggestions... Wait 1000 # The suggested autocompletions are shown in HTML. We can verify # that they are there with a DOM verification sequence,in this case # for the potental match "evaline"... IndexSet 0 IndexFindElement 0 DOWN "name" "q" "" Wait 1000 Wait 1000 # Turn Application Mode ON... Wait 8836 WindowPos 0 28 16 976 620 KeyText 0 "evali" # Turn Application Mode OFF... Wait 3000 MatchString 0 "evaline" "" # Scan the DOM to confirm that the auto-complete produces the right # results... Wait 1000 IndexSet 0 IndexFindElementEx 0 DOWN "name:innerText" "value:evaline" "name:tagName" "value:SPAN" "" Wait 1000 IndexElementClick 0 "" # Confirm that we have the correct page by validating that the phrase # "The Official EVALINE website."... Wait 3885 ValidateSelectedText 0 394 0 "The Official EVALINE website." "" # End of script.