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

eValid -- Google Maps AJAX Example & Demonstration Script
eValid Home

Summary
This page presents eValid's solution to testing and validating the AJAX implementation methods used by Google Maps.

The goal of this regression test is to automatically perform an address lookup and confirm that the results of the search are consistent in terms of the map produced and the information displayed.

Script Description
This website introduces another layer of visual rendering synchronization challenges because we are dealing with numerous grids of map images which may or may not have assigned "id" fields and/or unique property identifiers. Such properties will also differ from different browser language setups, besides screen to screen and desktop environments.

The developed script involves the following steps:

  1. Go to the starting page, maps.google.com.

  2. Synchronize playback on the arrival of the complete page (sync Step 1 in script). The page is ready for a request.

  3. Type in a Search Maps request for "Moscone Convention Center San Francisco, CA". Click "Search Maps" to start the search.

  4. Synchronize on the arrival of the result page (sync Step 3 in script); This synchronization requires that the readyState be complete at a particular page element.

  5. Before we can Double Click on the "B" balloon results of the map for further details, we need to assure that the balloon is fully rendered and visually present. This is done with another synchronization step (sync Step 4 in script, before and after this event).

  6. Due to typical mouse movements within an active grid type environment and all that is involved with the rendering of maps, extra and unwanted script commands can be eliminated to avoid unintended interferences.

    The window position event is also moved to the top of the .evs file so that we do not have to deal with uncontrollable rendering responses when trying to resize windows in between events. (Step 5 in script, commented out the unwanted script command(s).)

  7. Validation of an object property is performed on the "B" balloon to confirm that the resulted map details are for the requested search. (Step 6 in script).

  8. Validation of text is performed on the left hand side display to confirm that the results list does contain the expected search item.

Script
Here is the final eValid script for this example.

# Recording by eValid(tm) V8 Build #264 
# Copyright © 2008 by Software Research, Inc. 
# Recording made on: Microsoft Windows 2000 Service Pack 3 (IE 6.0.2800.1106)

ProjectID "Project"
GroupID "Group"
TestID "example1"
LogID "AUTO"

ScreenSize 1280 1024
DeleteCache
DeleteCookies

# This command, which originally was automatically generated at 
# the end of the script recording process was found to be needed 
# to be executed first to assure end-of-run synchronization.

WindowPos 0 -1 -1 1155 870

InitLink "http://maps.google.com/"

# ORIGINAL  Wait 19998
#
# Step 1: ADDED Synchronize on completion of initial page...
# Two steps are used because the page actually changes dynamically...
SyncOnURL "http://maps.google.com/intl/en_us/mapfiles/118/maps2/mod_cb.js"
SyncOnURL "http://maps.google.com/intl/en_us/mapfiles/118/maps2/mod_traffic_app.js"

#
# Step 2: Then Input the Search Maps address details...
InputValue 0 104 "TEXT" "q_d" "q" "\"Moscone Convention Center San Francisco, CA\"" "" ""
Wait 2000
SubmitClick 0 112 "q_sub" "btnG" "Search Maps" ""

# ORIGINAL  Wait 60186
#
# Step 3: ADDED Synchronize on the map's "B" balloon for completion...
SyncOnSelectedObjProperty 0 325 "id" "mtgt_B" "readyState" "complete" ""

# ORIGINAL  Wait 21070
#
# Step 4: ADDED Synchronize on surrounding map grids 
# (before & after) Double Clicking balloon "B"...
IndexFindElement 0 DOWN "id" "mtgt_B" ""
IndexElementClick 0 ""
SyncOnURL "http://mt2.google.com/vt/v=w2.97&hl=en&x=5242&s=&y=12662&z=15&s=Gali"
ElementDblClick 0 350 6 6 "mtgt_B" "" ""
SyncOnURL "http://www.google.com/verify/EAAAAEB9VVyc5QhPY0cDUDmcoDg.gif"

#
# Step 5: Commented out the following script events because 
# they create unwanted/extra moves...

# ORIGINAL  Wait 3085
# ORIGINAL  ElementDblClick 0 292 109 24 "" "" ""
# ORIGINAL  Wait 28331

# ORIGINAL  WindowPos 0 -1 -1 1155 870      /* moved to the top */
#

# Commented out the following script event, also as part 
# of the unwanted/extra moves clean up...
# ORIGINAL   ElementMouseOver 0 225 27 11 "" ""

#
# Step 6: ADDED Synchronize before Validate of balloon "B" properties on 
# the final page to confirm arrival...
SyncOnURL "http://maps.google.com/intl/en_us/mapfiles/iw_close.gif"
ValidateSelectedObjProperty 0 0 "id" "mtgt_B" "tagName" "IMG" ""
Wait 5000
IndexFindElement 0 DOWN "className" "street-address" ""
IndexValidateObjProperty 0 "innerText" "747 Howard St" ""
ValidateSelectedText 0 508 0 "747 Howard St" ""

# End of script.

Screen Shots

  1. This is the starting screen, after the size adjustment was made. See Step 1 in script.

  2. Step 2 in script.

  3. See Steps 3, 4, 5 in script.

  4. See Step 6 in script. The map results and balloon area are validated by matching the innerText on both the left and right sides.