Using DOM, XPath & CSS for Object Identification in QTP – Part 1

QTP 11 introduced new features to identify Web objects using HTML DOM, XPath & CSS. These object identification strategies are widely used in open source tools like Selenium, WATIR etc.

In this series, I will explain how to use HTML DOM, XPath and CSS for identifying objects in your Web application. In Part 1, I will use HTML DOM for identifying the Web objects.

Document Object Model

The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a HTML document.

The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them. JavaScript uses DOM to add interactivity to HTML pages.

We can use the combination of JavaScript and HTML DOM interfaces to identify objects within Web Pages and Frames. This strategy can be useful for testing AJAX applications when object are dynamically added to the Web Page or Frame. While QTP’s Object Repository & AJAX testing features should suffice your need, this strategy can be used as a workaround for identifying the objects.

Document Object Model Methods (Interfaces)

Following HTML DOM document object methods (interfaces) can be used in QTP for identifying objects:

Calling JavaScript Code in QTP

QTP 11 introduced RunScript method to the Page and Frame Test Objects in Web Add-In. We can use this method to inject and execute JavaScript code in Page or Frame Test Objects. This method has number of uses for example testing JavaScript code within your page, invoking JavaScript events etc. This feature comes handy while testing complex AJAX Web applications.

Following example will display a JavaScript popup with Hello There!! message. This example uses Descriptive Programming to identify Browser and Page objects:

Browser("title:=Google").Page("title:=Google").RunScript("alert('Hello There!!');")

Using HTML DOM Methods & Properties in QTP

To access the HTML DOM methods we need to use the document object. We can use getElementById method to access the element using its HTML ID. This method will return the first element it finds in HTML DOM with specified ID. For example on Gmail Login Page, we can access the User Name text box by following way.

HTML Syntax for User Name Text Box:

<input id="Email" type="text" name="Email" />

QTP VBScript Syntax to access User Name Text Box:

Set objUserNameTextBox = Browser("title:=Gmail: Email from Google").Page("title:=Gmail: Email from Google").RunScript("document.getElementById('Email');")
objUserNameTextBox.value = "myname" 'Uses value property to set the contents of Text Box

This is most recommended method to identify the objects using HTML DOM. However this method might not work for elements where HTML IDs are not defined. We can use getElementsByName method to identify the elements by specifying the name attribute value. In following example we will use same Gmail Login User Name Text Box, however this time we will identify this element using the name attribute value:

Set objUserNameTextBox = Browser("title:=Gmail: Email from Google").Page("title:=Gmail: Email from Google").RunScript("document.getElementsByName('Email')(0);")
objUserNameTextBox.value = "myname" 'Set  User Name Text Box value

The getElementsByName returns a JavaScript array for all the elements whose name matches with the specified value. In above example we use array index to access the 0^th element, which is the User Name Text Box.

However there is another method which comes handy when you don’t have either IDs or Names specified for HTML elements. Using getElementsByTagName you can identify the object by Tag name. This is least preferred way to access the elements.

Set objUserNameTextBox = Browser("title:=Gmail: Email from Google").Page("title:=Gmail: Email from Google").RunScript("document.getElementsByTagName('INPUT')(12);")
objUserNameTextBox.value = "myname" 'Set  User Name Text Box value

The getElementsByTagName returns a JavaScript array for all the elements whose HTML Tag name matches with the specified value. In above example we use array index to access the 12^th element which is the User Name Text Box. This method needs efforts to find out exact index of the intended element. If the index changes, your script will fail.

We can also use combination of HTML DOM methods to identify the objects. In following example a Text Box is embedded in DIV element, however this Text Box does not have enough identification properties. We will use getElementById to identify the parent DIV element and getElementsByTabName to identify the Text Box:

HTML Syntax:

</pre>
<div id="<span class=&quot;hiddenSpellError&quot; pre=&quot;&quot;>mainArea</span>"> </div>
<pre>
	<p>Enter Amount: <input type=text></input></p>
</div>

QTP VBScript Syntax to access Text Box:

Set objAmountTextBox = Browser("title:=MyApp").Page("title:=MyApp").RunScript("document.getElementById('mainArea').getElementsByTagName('INPUT')(0);")
objAmountTextBox.value = "100" 'Set the Text Box value

We can also identify elements using the relationships. Following table explains using various relationship identifiers:

In the next instalment we will see how to use XPath for locating the objects in QTP.