DOM Model

About DOM Model

How Object Names Are Formed

Dealing with Dynamic Indexes

Accessing Native DOM document Object

Remarks

In the DOM model, web page elements are accessed through the document.all collection of the Page test object corresponding to the web page. For example, an input field with the id of ctl00_MainContent_username is available as PageObj.document.all.Item("ctl00_MainContent_username").

Click the image to enlarge it.

If the web page contains frames (FRAME or IFRAME elements), they can be accessed through the document.frames collection, and the frame elements are available under the document.all collection of the corresponding Frame test object.

Click the image to enlarge it.

The DOM model got its name from using the document.all and document.frames syntaxes that are supported by the Document Object Model (DOM) of web pages.

Since the object hierarchy of a web page or frame is only a few levels deep, the fully-qualified object names are short compared to those of the Tree model. However, unlike the Tree model, the DOM model does not reflect the logical nesting of the web page elements.

If you use Name Mapping, the names used to refer to web page objects from tests are specified in Name Mapping. For example, the full name of the “View All” link on a web page titled “Example” can be:

You can customize these names to make them more descriptive. For more information, see Addressing Web Objects Using Name Mapping and Aliases.

The Object Browser, in its turn, displays object names using the syntax that directly includes identification properties. The syntax is as follows:

Id is one of the following values (in the order of precedence):

• For the HTML, HEAD, TITLE and BODY elements - the tag name. These elements are named Item("HTML"), Item("BODY") and so on.

• The element’s id or name in the HTML code. For example, an object name can be Item("username"). The project’s Identification attribute specifies which attribute - id or name - is used first.

• If the object has neither id nor name specified, TestComplete uses the object’s 1-based index within the page or frame. For example, an object name can be Item(14). The index is specified by the Id property or by the object’s native sourceIndex property.

In addition, the selected Id value is modified in the following way to make it a valid identifier in all the supported test scripting languages:

• Non-alphanumeric characters, such as hyphens ("-") and dots ("."), are replaced with an underscore ("_").

• Leading underscores are stripped.

In some web applications, the indexes of web test objects can be different in different browsers and can also change from one test run to another. This happens in the following cases:

• The Web page contents are dynamically modified using JavaScript.

• The developers changed the web page markup in the new version of the web application.

• The web application returns different HTML content to different browsers.

There are several ways to handle dynamic indexes to ensure successful test playback in different browsers:

• The preferred solution is to specify the id attribute for all web objects that are used in your tests. In this case, web page objects will be identified by their unique id values rather than by dynamic indexes.

• If you use Name Mapping in your test project, you can map web page objects by a set of unique unchangeable properties, such as tagName, innerText and (optionally) className.

• If you do not use Name Mapping, you can use search methods such as FindChild or EvaluateXPath to locate the target objects by their unique properties. For more information, see About Finding Web Objects.

The pageObj.document and frameObj.document objects are wrappers over the DOM document object of a web page and frame. This means that the document test object has all native methods and properties of the DOM document object, such as getElementsByClassName(), getElementsByTagName() and so on. You can use these methods and properties in your tests to custom process web page elements.

However, if you are developing a common test library for use across tests with different web object models, we recommend that you access the DOM document object using the Page.contentDocument property. It is cross-browser and is supported in all web object models. For more information, see Accessing DOM document Object.

• The DOM object model is obsolete and is not fully supported for cross-browser web testing. Use the Tree model instead of it.

  To avoid a warning when using the DOM model with existing legacy tests, you need to enable the Use legacy testing features option in Tools | Current Project Properties | Open Applications | Web Testing.

• The document.all collection and individual web page elements are not added to Name Mapping automatically during test recording. You can add them to Name Mapping manually, as explained in the Mapping Objects Manually topic.