HTML DOM Objects - QTP


Every TAG in the HTML source represents a node in the HTML DOM tree. Once a TAG is opened, all the tags following it become child nodes of the starting node. Each TAG can have a variety of attributes, some of which are predefined and some user-defined.

Consider the following HTML node:

<INPUT type="textbox" value=BName" name="txt_Name" myval="Test">

Here the pre-defined attributes are type, value and name. The myval attribute is user denned for the INPUT tag.

Consider the following HTML source code:

<script type=""text/3Script">function ChangeColor() I
document.body.bgColor="yellow" I </script></head>
<body onclick="ChangeColor()">Click on this document!

Figure shows the DOM tree structure for the above page

HTML DOM Objects

The Document Object

The Document object represents the entire document. It is the top most node in the DOM tree. The Document node doesn't have any sibling nodes as it's the root node. It provides various collections for Links, Anchors, Scripts, Images etc., in the document. It also provides various functions that we can use to access an element using the name of the element.

The HTML Element Object

The HTML Element object refers to any particular node in the DOM. Depending on the type of node the element refers to, it provides access to methods and properties related to that type of element. Every element object supports these properties - outerText, outerHtml, innerText, innerHtml, tagName etc.

The HTML Element Collection

The HTML Element Collection object is a collection of one or more elements. Consider the following HTML code:

<INPUT name="txt-.Name" type="text>
<INPUT name="txt_Name" type="text"">

We can access the above DOM objects using the following code:

'Get a DOM Element Collection by name
Set txt_Boxes = document.getElementsByName("txt_Name")
For i = 0 to txt_Boxes.Length - 1
txt_Boxes.item(i).value = "Tarun"

'The default property is item so it can skipped
txt_Boxes(i).value = "Tarun" Next

In QTP a script using this collection will look something like:

'This gives access to the browser COM
Set browserObj = BrowserC") .Object
'This gives access to the browser's document object
Set pageObj = BrowserC") .Page("" ) .Object
Set txt_Boxes= browserObj.document.getElementsByName("txt-Name")
Set txt_Boxes= pageObj.getElementsByName("txt„Name")
For i = 0 to txt_Boxes.Length - 1
txt_Boxes.item(i).value = "Tarun"
txt_Boxes(i).value = "Tarun"
'The default property is item so it can skipped Next

We will be using the Document object directly in the next several explanations, so the following code shows how to get the Document object using several different techniques:

'Method 1

Set Document = Browser("").Page("").Object

'Method 2

Set Document = Browser("").Object.document

'Method 3

Set Document = Browser( " ").Page("").Frame("").object.document

Getting the Web page Element using the DOM

Consider the following HTML code:

<INPUT name="txt_Name" id="firstname" type="text" value="Tarun">

There are several ways to get this element and the following code shows most of them:

'Mainly used at the time of IE4. These are compatible
'with later versions of IE, but is not recommended
Set txt_Elem = Document.All("firstna«e") Set txt_Elem = Document.All("txt.Name")
'Used with IE 5.0
Set txt.Elem = Document.getElementsById("firstname")
'Checking if the elements is present or not
If txt_Elem is Nothing then Msgbox "Element Is not present"

'Getting the elements using getElementsByTagName method
'with the element Tag Name
Set txt.Elem = Document.getElementsByTagName("INPUT").item(0)
Set txt.Elem = Document.getElementsByTagName("INPUT").item("txt-Name")
Set txt_Elem = Document.getElementsByTagName("INPUT") .item("firstname")
'Getting the elements using getElementsByName method
'with the name of the element
Set txt_Elem = Document.getElementsByName("txt„Na«e").item(0)

The last four lines will throw an exception if there is no element with and INPUT tag or with the name of "txtName". To avoid this we can first check the length of the collection returned by the getElementsByTagName or getElementsByName methods using the following code:

"Check the length of collection returned by getElementsByName
If Document.getElementsByName("txt_Name").length <> 0 then
Set txt_Elem = Document.getElementsByName("txt_.Name").item(0)
ElseMsgBox "Element is not present"
End if

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

QTP Topics