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 -- Modify a DOM Element Dynamically
eValid Home

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.


SAMPLE SCREENSHOT GOES HERE...It shows the 

TITLE OF SCREENSHOT

The screenshot is a dynamic image, 
showing the color changes
in the sample page.


SAMPLE SCREENSHOT GOES HERE...It shows the 

TITLE OF SCREENSHOT

The screenshot is a dynamic image, 
showing the color changes
in the sample page.


SAMPLE SCREENSHOT GOES HERE...It shows the 

TITLE OF SCREENSHOT

The screenshot is a dynamic image, 
showing the color changes
in the sample page.
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"