Thursday, August 8, 2013

Examples of Dynamic DOM Manipulation

As eValid users know, there is a unique capability available from within the eValid script language to manipulate the current contents of a page at the Document Object Model (DOM) level. This capability can often be important when adjusting test scripts to increase their resistance to failure due to non-critical changes in a page, or for performing complex validation steps.
To illustrate some of the kinds of things that can be done, we have put together these simple example scripts.
  • Dynamic Modifications
    In this example the goal is to change an element inside the DOM of a page locally, that is, with the HTML content that is currently in the browser. The technique used is to apply the ValueSet and ValuePutElement commands to a particular page element that affects, for illustration purposes, the background color of a table element. Just to be sure the script passage does this for two different colors. Here's the full explanation: Modify a DOM Element Dynamically.
  • Checking AJAX Operation
    A very common feature that is AJAX-supported is the autocomplete function. Users initial input keystrokes are feed to the server, which responds by adding HTML to the page that shows suggested possible endins for the string. In our example, we use a common search engine's autocomplete feature to illustrate how to verify that a particular partial string will always produce a specific suggestion. The verification is done with a MatchString command, which confirms that the target string is present in the newly-updated page HTML. Here's the full explanation: Checking AJAX Autocomplete Functionality.
  • In-Place Modifications
    The actual content of the current HTML can be adjusted, without getting fresh HTML from the server. To show this, the example script uses adds a ValueSet and ValuePutElement command to add a "NEW-WINDOW" requirement to an anchor tag. Then, just to make sure that the change has been made, the script clicks on the link, which dutifully replaces itself in a new window. Here's the full explanation: Change the Target of an Anchor Tag Link.

No comments: