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

Problem Description
How do you use the DOM manipulation commands to modify a specific DOM element dynamically?

Solution Description
In this solution the eValid script demonstrates the ability to modify the DOM dynamically by using eValid DOM manipulation commands to change the background color.

1. Navigates to a page
2. Changes the background color for one element to COLOR1.
3. Waits 5 seconds (so you can see the effect).
4. Changes the background color for one element to COLOR2
5. Waits 5 seconds (so you can see the effect).
6. Changes the background color back to the original background color.
7. Waits 5 seconds (so you can see the effect).

Illustration Area
Here is a Sample Screen Area (opens in a new window) with a user-specified background color. The example script changes the background color of this area.

Example Of Dynamic DOM Modification

Script Explanation
Here is the script which performs the above steps.

# # Recording by eValid V9 # Copyright (c) 2013 by Software Research, Inc. # Recording made on: Microsoft Windows Vista Service Pack 1 (IE 7.0) # ProjectID "Project" GroupID "work" TestID "change.color" LogID "AUTO" ScreenSize 1280 1024 FontSize 0 DeleteCache DeleteCookies InitLink "http://www.e-valid.com/Products/Documentation.9" \ "/DOM/Examples/modify.DOM.sample.html" Wait 2106 # Change background and links to COLOR1... IndexSetEnd 0 "" IndexFindElement 0 UP "tagName" "TABLE" "" ValueSet "#FF00FF" ValuePutElement 0 "bgColor" "" Wait 5000 # Change links to COLOR2... ValueSet "00FF00" ValuePutElement 0 "bgColor" "" Wait 5000 # Change links back to original... Reload 0 # End of script.

Download "change.color.evs"