5/8/2018 Using DOM, XPath & CSS for Object Identification in QTP – Part 1 | TestO'Matic

TestO'Matic

A blog on Test Automation, Technical QA, DevOps, Testing

Tools & Techniques and more. This is a personal blog. The
content and opinions expressed in this blog are solely my
own and do not express the views or opinions of my current
or past employers.

Using DOM, XPath & CSS for Object Identification

in QTP – Part 1

Posted: November 16, 2011 | Author: upgundecha | Filed under: QTP, Test Automation, Testing | Tags:
CSS, DOM, HTML DOM, QTP, Web Testing, XPath |6 Comments
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:
https://unmesh.me/2011/11/16/using-dom-xpath-css-for-object-identification-in-qtp-part-1/ 1/5
5/8/2018 Using DOM, XPath & CSS for Object Identification in QTP – Part 1 | TestO'Matic

Method Description
getElementById Returns the first element with the
specified id
getElementsByName Returns all elements with a specified
name in an JavaScript array
getElementsByTagName Returns all elements with a specified
tagname in a JavaScript array
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:

1 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:

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

QTP VBScript Syntax to access User Name Text Box:

1 Set objUserNameTextBox = Browser("title:=Gmail: Email from Google").Page("title

2 objUserNameTextBox.value = "myname" 'Uses value property to set the contents of

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 a ribute 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 a ribute value:

1 Set objUserNameTextBox = Browser("title:=Gmail: Email from Google").Page("title

2 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 0th element, which is the User Name
Text Box.
https://unmesh.me/2011/11/16/using-dom-xpath-css-for-object-identification-in-qtp-part-1/ 2/5
5/8/2018 Using DOM, XPath & CSS for Object Identification in QTP – Part 1 | TestO'Matic

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.

1 Set objUserNameTextBox = Browser("title:=Gmail: Email from Google").Page("title

2 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 12th 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:

1 </pre>
2 <div id="<span class=&quot;hiddenSpellError&quot; pre=&quot;&quot;>mainArea</sp
3 <pre>
4 <p>Enter Amount: <input type=text></input></p>
5 </div>

QTP VBScript Syntax to access Text Box:

1 Set objAmountTextBox = Browser("title:=MyApp").Page("title:=MyApp").RunScript("

2 objAmountTextBox.value = "100" 'Set the Text Box value

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

document.getElementById(‘mainArea’).firstChild Returns the first child element of element

returned from getElementById
document.getElementById(‘mainArea’).lastChild Returns the last child element of element
returned from getElementById
document.getElementById(‘mainArea’).parentNode Returns the parent element of element
returned from getElementById
document.getElementById(‘mainArea’). nextSibling Returns the next sibling element of element
returned from getElementById
document.getElementById(‘mainArea’). Returns the previous sibling element of
previousSibling element returned from getElementById
In the next instalment we will see how to use XPath for locating the objects in QTP.

https://unmesh.me/2011/11/16/using-dom-xpath-css-for-object-identification-in-qtp-part-1/ 3/5
5/8/2018 Using DOM, XPath & CSS for Object Identification in QTP – Part 1 | TestO'Matic

6 Comments on “Using DOM, XPath & CSS for Object Identification

in QTP – Part 1”

1. wso download says:

March 13, 2013 at 6:49 pm
Simply wanna comment that you have a very nice website , I the design and style it actually stands
out.

Reply
2. Shilpa says:
May 15, 2014 at 6:05 am
Concepts are explained with examples is very useful, easy to understand

Reply
3. Vishal Aggarwal says:
November 25, 2014 at 2:28 pm
Thanks for sharing such useful and unique content in QTP/UFT.
Vishal Aggarwal
h p://testocean.blogspot.in

Reply
4. rajesh says:
April 18, 2015 at 9:12 am
when i am running same script i am ge ing error “Object Required”,can u plz provide me solution

Reply
5. vasegowda says:
July 9, 2015 at 1:27 pm
Excellent work, lots of use

Reply
6. ShibaShankar says:
July 29, 2015 at 1:05 pm
Very useful in handling unidentified objects

Reply

Blog at WordPress.com. Mid Mo Design.

https://unmesh.me/2011/11/16/using-dom-xpath-css-for-object-identification-in-qtp-part-1/ 4/5
5/8/2018 Using DOM, XPath & CSS for Object Identification in QTP – Part 1 | TestO'Matic

https://unmesh.me/2011/11/16/using-dom-xpath-css-for-object-identification-in-qtp-part-1/ 5/5