DOM and QTP

Exclusive offer: get 50% off this eBook here
Designing and Implementing Test Automation Frameworks with QTP

Designing and Implementing Test Automation Frameworks with QTP — Save 50%

Learn how to design and implement a test automation framework block by block with this book and ebook

$23.99    $12.00
by Ashish Bhargava | November 2013 | Enterprise Articles

In this article by Ashish Bhargava, author of Designing and Implementing Test Automation Frameworks with QTP, we learn about DOM, QTP, and XPath. We see various terminologies and expressions used by XPath.

(For more resources related to this topic, see here.)

QuickTest Object property for a Web object allows us to get a reference to the DOM object, and can perform any operation on a DOM object. For example, the following code shows that the object on the page allows retrieving the element by name username, that is, the textbox in the next step assigns the value as ashish.

Set Obj = Browser("Tours").Page("Tours").Object.getElementsByName("userName) 'Get the length of the objects Print obj.length ' obj(0).value="ashish"

The following code snippet shows various operations that can be performed using the Object property of the web object:

'Retrieve all the link elements in a web page Set links = Browser ("Mercury Tours").Page("Mercury Tours").Object.links 'Length property provide total number of links For i =0 to links.length -1 Print links(i).toString() 'Print the value of the links Next Get the web edit object and set the focus on it Set MyWebEdit = Browser("Tours").Page("Tours").WebEdit("username"). Object MyWebEdit.focus 'Retrieve the html element by its name obj = Browser("Tours").Page("Tours").Object. getElementsByName("userName" ) 'set the value to the retrieved object obj.value ="ashish" 'Retrieve the total number of the images in the web pages set images = Browser("Mercury Tours").Page("Mercury Tours").Object.images print images.length 'Clicking on the Image obj = Browser("Tours").Page("Mercury Tours").Object.getElementsByName("login") obj.click 'Selecting the value from the drop down using selectedIndex method Browser("Flight").Page("Flight).WebList("pass.0.meal").Object. selectedIndex =1 'Click on the check box Browser("Flight").Page("Flight").WebCheckBox("ticketLess").Object. click

Firing an event

QTP allows firing of the events on the web objects:

Browser("The Fishing Website fishing").Page("The Fishing Website fishing").Link("Link").FireEvent "onmouseover"

The following example uses the FireEvent method to trigger the onpropertychange event on a form:

Browser("New Page").Page("New Page").WebElement("html tag:=Form").FireEvent "onpropertychange"

QTP allows executing JavaScript code. There are two JavaScript functions that allow us to interact with web pages. We can retrieve objects and perform the actions on them or we can retrieve the properties from the element on the pages:

RunScript executes the JavaScript code, passed as an argument to this function.

The following example shows how the RunScript method calls the ImgCount method, which returns the number of images in the page:

length = Browser("Mercury Tours").Page("Mercury Tours").RunScript("ImgCount(); function ImageCount() {var list = document.getElementsByTagName('img'); return list.length;}") print "The total number of images on the page is " & length

RunScriptsFormFile uses the full path of the JavaScript files to execute it. The location can be an absolute or relative filesystem path or a quality center path.

The following is a sample JavaScript file (logo.js):

var myNode = document.getElementById("lga"); myNode.innerHTML = '';

Use the logo.js file, as shown in the following code:

Browser("Browser").Page("page").RunScriptFromFile "c:\logo.js" 'Check that the Web page behaves correctly If Browser("Browser").Page("page").Image("Image").Exist Then Reporter.ReportEvent micFail, "Failed to remove logo" End If

The above example uses the RunScriptFromFile method to remove a DOM element from a web page and checks if the page still behaves correctly when the DOM element has been removed.

Using XPath

XPath allows navigating and finding elements and attributes in an HTML document. XPath uses path expressions to navigate in HTML documents. QTP allows XPath to create the object description; for example:

xpath:=//input[@type='image' and contains(@name,'findFlights')

In the following section, we will learn the various XPath terminologies and methodologies to find the objects using XPath.

XPath terminology

XPath uses various terms to define elements and their relationships among HTML elements, as shown in the following table:

Atomic values

Atomic values are nodes with no children or parent

Ancestors

A node's parent, parent's parent, and so on

Descendants

A node's children, children's children, and so on

Parent

Each element and attribute has one parent

Children

Element nodes may have zero, one, or more children

Siblings

Nodes that have the same parent

Selecting nodes

A path expression allows selecting nodes in a document. The commonly used path expressions are shown in the following table:

Symbol

Meaning

/(slash)

Select elements relative to the root node

//(double slash)

Select nodes in the document from the current node that match the selection irrespective of its position

.(dot)

Represents the current node

..

Represents the parent of the current node

@

Represents an attribute

nodename

Selects all nodes with the name "nodename"

Slash (/) is used in the beginning and it defines an absolute path; for example, /html/head/title returns the title tag. It defines ancestor and descendant relationships if used in the middle; for example, //div/table that returns the div containing a table.

Double slash (//) is used to find a node in any location; for example, //table returns all the tables. It defines a descendant relationship if used in the middle; for example, /html//title returns the title tag, which is descendant of the html tag.

Refer to the following table to see a few more examples with their meanings:

Expression

Meaning

//a

Find all anchor tags

//a//img

List the images that are inside a link

//img/@alt

Show all the alt tags

//a/@href

Show the href attribute for every link

//a[@*]

Anchor tab with any attribute

//title/text() or /html/head/title/text()

Get the title of a page

//img[@alt]

List the images that have alt tags

//img[not(@alt)]

List the images that don't have alt tags

//*[@id='mainContent']

Get an element with a particular CSS ID

//div [not(@id="div1")]

Make an array element from the XPath

//p/..

Selects the parent element of p (paragraph) child

XXX[@att]

Selects all the child elements of XXX with an attribute named att

./@* for example, //script/./@*

Finds all attribute values of current element

Predicates

A predicate is embedded in square brackets and is used to find out specific node(s) or a node that contains a specific value:

  • //p[@align]: This allows finding all the tags that have align attribute value as center

  • //img[@alt]: This allows finding all the img (image) tags that contain the alt tag

  • //table[@border]: This allows finding all the table tags that contain border attributes

  • //table[@border >1]: This finds the table with border value greater than 1

Retrieve the table row using the complete path:

//body/div/table/tbody/tr[1]

Get the name of the parent of //body/div/table/.. (parent of the table tag)

//body/div/table/..[name()]

Path expression

Result

//div/p[1]

Selects the first paragraph element that is the child of the div element

//div/p [last()]

Selects the last paragraph element that is the child of the div element

//div/p[last()-1]

Selects the second last paragraph element that is the child of the div element

//div/p[position()<3]

Selects the first two paragraph elements that are children of the div element

//script[@language]

Selects all script element(s) with an attribute named as language

//script[@language='javascript']

Selects all the script elements that have an attribute named language with a value of JavaScript

//div/p[text()>45.00]

Selects all the paragraph elements of the div element that have a text element with a value greater than 45.00

Selecting unknown nodes

Apart from selecting the specific nodes in XPath, XPath allows us to select the group of HTML elements using *, @, and node() functions.

  • * represents an element node

  • @ represents the attribute

  • node() represents any node

The previous mentioned elements allow selecting the unknown nodes; for example:

  • /div/* selects all the child nodes of a div element

  • //* selects all the elements in a document

  • //script[@*] selects all the title elements which contain attributes

Designing and Implementing Test Automation Frameworks with QTP Learn how to design and implement a test automation framework block by block with this book and ebook
Published: November 2013
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Selecting several paths

Use union | operator in XPath expressions for allowing to select several paths, as shown in the following table:

Path expression

Action

//div|/p | //div/span

Selects all the paragraph and span elements of the div element

//p | //span

Selects all the p (paragraph) and span elements in the document

Axes in XPath

An axis allows defining a node which is relative to its current node. The following is the list of the axes in XPath:

  • self

  • parent

  • attribute

  • child

  • Ancestor and ancestor-or-self

  • Descendant and descendant-or-self

  • Following and following-sibling

  • Preceding and preceding-sibling

  • namespace

Locating a element using location path

A location of the element is represented in two ways using absolute and relative paths.

Each step is evaluated against the nodes in the current node. The syntax looks like the following syntax:

axisname::nodetest[predicate]

An axis defines the tree-relationship between selected nodes and current node.

A node-test allows us to identify node(s) within an axis.

Zero or more predicates allow further refining of the selected node set.

Take a look at the following example:

//input[ancestor-or-self::*[@name='userName']]

In the preceding example, ancestor-or-self is an axes, ::* is the nodetest and [@name='userName'] is the predicate, allowing us to search all ancestor-or-self elements whose attribute names are userName contained in the input type element //input[ansector-or-self::*[@name='userName']].

Axes allow finding the descendant of the element; for example:

//div[descendant::p] allows us to find all the div elements having descendant as paragraph.

descendant::p axes allow finding the ancestor and descendant of the element, for example, finding all the ancestors of button or finding all the div whose descendants are table.

//input[Ancestor::div[@align='center']] //div[descendant::table]

Use of the XPath functions:

  • //div/text(): This retrieves the text from the div tags using text functions

  • //div/node(): Getting all the nodes under div tags using the node function

To get the descendant, XPath function start-with finds the value that starts with //a[starts-with(@href,'http://ads').

Find all tags that contains the style attribute //*[@style].

Operators in XPath

The XPath expressions use operators to build the conditions to be evaluated. The following is the list of XPath operators:

Operator category

Operator

Description

Mathematical

+

-

*

Div

MOD

Addition

Subtraction

Multiplication

Div Division

MOD Modulus (division remainder)

Equality and comparison

=

!=

<

<=

>

>=

Equal

Not equal

Less than

Less than or equal to

Greater than

Greater than or equal to

Logical

Or

And

Logical Or

Logical And

Two node sets

| Union

Computes two node sets

The following table shows some examples for using the operators in XPath expressions:

Expression

Action

//input | //div/input/..

Input union input where div is its parent

//table[@border>=1]

Retrieves the tables that have border greater than 1

//table[@id=3]/td[2]/text()+1

Retrieves the text from the third row and second column and adds 1 to it

//tr[@id=1] and //tr[@id=3]

Returns true if both expression are true

Example of using XPath in finding the siblings which allow finding the object related to their siblings and not to their location:

<html> <Body> <br><br> <table name="maintable" border="1"> <th>Item</th><th>Quantity</th><th>Price</th><th></th> <tr id=1 width="600px"> <td> HP LoadRuuner </td> <td > 01 </td> <td> $27 </td> <td> <input type="button" value="AddToCart"> </td> </tr> <tr id=2 width="600px"> <td> HP Quality Center </td> <td> 01 </td> <td> $29 </td> <td> <input type="button" value="AddToCart"> </td> </tr> <tr id=3 width="600px"> <td > HP QuickTest Professional </td> <td > 01 </td> <td> $25 </td> <td> <input type="button" value="AddToCart"> </td> </tr> </table> </body> </html>

Add the code to the file and save it as an .html file. Click on the AddToCart button.

Remove the following recorded script:

Browser("Browser").Page("Page").WebButton("AddToCart").Click

Replace and use the following script:

Browser("Browser").Page("Page").WebButton("xpath:=//td[contains(te xt(),'HP QuickTest')]/following-sibling::td[3]/input").Click

This preceding script allows clicking on the button (AddToCart), which is the sibling of the HP QuickTest Professional text. To click on the AddToCart button, which is the sibling of HP Quality Center text, use the following code:

Browser("Browser").Page("Page").WebButton("xpath:=//td[contains(te xt(),'HP Quality Center')]/followingsibling:: td[3]/input").Click

XPath can be implemented in the QTP Scripts. The following section explains the various usages of XPath in a web page. Examples of the usage of XPath are:

  • Entering a value in the text box

  • Selecting the value from a drop-down list

  • Clicking on images and buttons

  • Finding objects by ID, tag name, name, and attributes

  • Allowing to extract the information for validation

  • Dealing with duplicate objects as array subscripts

Key steps to create a framework using XPath are:

  1. Identify the flow to be recorded.

  2. Create OR (create OR for each page or use the object description).

  3. Identify the XPath that identifies the object uniquely.

  4. Define the XPath that allows us to retrieve an element and defines it as a constant.

  5. Use them as object descriptions.

Xpath

  • Use descriptive programming (use index property) for handling duplicate objects or array subscripts in XPath expressions

  • XPath allows the use of index for collection of elements

  • Retrieve innerHTML with GetROProperty to get the values

  • Define object description using XPath as constant, allowing easier maintenance, and only a single place to change and no need to change all over the script

Summary

In this article, we have learned about various concepts and examples. The knowledge of DOM, JavaScript, and XPath is very handy to create scripts. The XPath and DOM is the least used concept in the QTP for script creation and validation, but these are helpful in creating manual checkpoints by retrieving the data from the web pages conveniently. Path is a really good way to navigate your site when there are no IDs on elements that you need to work with or is near the element you want to work with.

Resources for Article :


Further resources on this subject:


Designing and Implementing Test Automation Frameworks with QTP Learn how to design and implement a test automation framework block by block with this book and ebook
Published: November 2013
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Ashish Bhargava

Ashish Bhargava has over 10 years' experience in Information Technology. Working as a test lead, tester, and Java developer, he delivered many successful applications. He has experience in designing frameworks using various tools and languages. He has worked with HCL Technologies and Microsoft. He worked on QTP, Coded UI, and RFT, and has experience in VBScript, JavaScript, Java, and C#. He has experience in technically mentoring the junior team members to learn automation and test automation tools. He has experience in teaching automation and designing courses for test automation and manual testing. The author is the key
contributor at http://testautomationlabs.com/.

Ashish has the following professional certifications:

  • HP Certified QTP Professional
  • ISTQB Certified
  • Certified Software Test Manager (CSTM)

Books From Packt


Arquillian Testing Guide
Arquillian Testing Guide

HTML5 and CSS3 Transition, Transformation, and Animation
HTML5 and CSS3 Transition, Transformation, and Animation

Mobile-first Bootstrap
Mobile-first Bootstrap

Apache Struts 2 Web Application Development
Apache Struts 2 Web Application Development

Application Development with Qt Creator
Application Development with Qt Creator

Instant Firebug Starter
Instant Firebug Starter

Learning Stencyl 3.x Game Development: Beginner's Guide
Learning Stencyl 3.x Game Development: Beginner's Guide

Robot Framework Test Automation
Robot Framework Test Automation


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
5
N
v
x
D
2
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software