©2010 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice

Automating Web 2.0 and Rich Internet Applications with HP QuickTest Professional and solving the Google Web Toolkit puzzle

Igor GershovichConnected Testing

• Connected Testing is an independent consulting company specializing in Test Automation and Performance Testing

• We are located in Denver, Colorado

• We have extensive experience across a range of

industries including Financial Services,

Healthcare, Aerospace, Transportation, Telecommunications

http://upload.wikimedia.org/wikipedia/commons/a/a7/Web_2.0_Map.svg

Often feature a rich, user-friendly interface based Rich Internet Application (RIA) technologies such as Ajax, Flex, Silverlight.

Are Web Applications with some features of desktop applications

Communicate with server applications, and use a plug-in or browser technologies in addition to or instead of HTML and CSS.

Adobe Flash/Flex

Google Web Toolkit (GWT)

Microsoft Silverlight

dojo

Curl

jQuery

And 200 or 300 others

Most of Rich Internet are based on AJAX (Asynchronous JavaScript + XML) technology

Microsoft Silverlight and Adobe Flex have proprietary runtime technologies

AJAX is a technique that combines and exploits some long-standing Web technologies:◦ Using XHTML and Cascading Style Sheets (CSS) for

structure and presentation. ◦ Displaying and manipulating pages using the

Document Object Model (DOM). ◦ Using the browser's XMLHttpRequest object to

transfer data between the client and the server. ◦ Using XML as the format for the data flowing between

the client and the server. ◦ Using JavaScript to dynamically display and interact

with all of the above.

AJAX allows the server to update the current Web page as opposed to sending a new page

The single page interface increases user interactivity

Some search engines are not equipped for AJAX-based applications

Can be too much context on one page

Bookmarks, Browser‟s Back or Forward navigation may not function as expected

Clicking on Adelie

Information From Server

Internet

ServerClient

4. Client processes XML Doc

using JScript and updates

Web page

3. Server sends HTTP

Response With XML Data

1. Client creates XmlHttpRequest

object using JScript then sends

HTTP request

2. Server processes the

HTTP request

Google Web Toolkit (GWT) is a framework for Java Developers to develop AJAX Web Applications

There are numerous widget libraries available for GWT

The developer uses Google Web Toolkit (GWT) to write AJAX front-end in the Java programming language

When it is ready to deploy, GWT compiles Java source code into optimized, standalone JavaScript files.

Custom or 3rd party Web controls

No unique object properties

Synchronization for AJAX

Cascading Style Sheets (CSS)

No common design framework between GWT applications

Can‟t view HTML using View Source

It is a Microsoft add-on for IE6 and IE7 that aimed to aid in design and debugging of web pages. It is included in IE8.

It allows to view DOM and CSS structures

Firebug is a similar tool for Firefox

Automated tools “see” all the objects in CSS-based applications, even if objects are hidden

CSS uses “display” property to hide parts of HTML page

To verify if object or part of HTML page is visible use “Style.display” and “CurrentStyle.display” properties

CurrentStyle.Display = “block” „visible

CurrentStyle.Display = “none” „not visible

Public Function Web_DisplayCSS(byVal WebObj)

Dim bDisplayed: bDisplayed = True

Set WebObj = WebObj.Object

Do

If WebObj.Style.Display ="none" or WebObj.CurrentStyle.Display="none" Then

bDisplayed = False

Exit Do

End If

Set WebObj = WebObj.ParentNode

Loop while Not (WebObj is Nothing) AND WebObj.NodeName<>"#document"

Web_DisplayCSS = bDisplayed

End Function

By default GWT doesn‟t generate the useful web object properties, like “html id” or “name” for object recognition mechanism of GUI test tools

It is highly recommended to work with development team to get a unique static value assigned to web objects

<DIV> - WebElements (children)

<IMG> - Image

<INPUT> - WebEdit

<DIV> - WebElement (parent)

Tree

Grid

Browser‟s Status Bar isn‟t relevant for GWT applications since page is not getting reloaded

Verify that Object existIf .WeEdit(“”).Exist(seconds) …

Page sync – count number of objects on the page and verify that count doesn‟t changed several times in a row

Use AJAX “Please Wait” Wheel object or similar objects

Dynamic Object contents – sync on object propertiesBrowser("").WebList("").WaitProperty,"items count", micGreaterThanOrEqual(5)

More on this topic (QTP info):http://relevantcodes.com/qtp-synchronization-for-ajax-applications/http://www.vidbob.com/qtp/ajax-and-javascript-toolkits.html

What people really want to ask:

Does QTP work with custom objects from various JavaScript toolkits?

There are 2 ways to work with custom objects:◦ QTP Web-Extensibility add-in. It enables you to

develop custom support for third-party and custom Web controls that are not supported out-of-the-box

◦ Traditional approach – coding (Functions/Classes)

To manipulate these objects we need to define custom methods and properties

Here are excellent articles on this topic:◦ AJAX and JavaScript tools – Web Extensibility and

Traditional approach examples for custom grids -www.vidbob.com

◦ “Web Extensibility Lesson – Building a toolkit Support” for combobox at www.advancedqtp.com

Dialog box Included in Object Hierarchy. Object

Repository/Descriptive Programming approach

Dialog box excluded from Object Hierarchy

Dialog box Included in Object Hierarchy. Object

Repository only approach. Btn_Tags object moved

Manually under Dialog box in OR hierarchy

• “Out of the box” support for the most common Web 2.0

technologies, including:

-Silverlight 3.0

- Ajax toolkits:

-ASP.NET AJAX (from Microsoft)

-GWT (from Google)

-YUI (from Yahoo)

-Dojo (open source)

•New Extensibility Accelerator (EA) for Functional Testing

to provide fast and easy FT add-in extensibility

It is very advanced – you need to know JavaScript and XML

Troubleshooting is difficult

Add-in Distribution/Redistribution – it needs to be install/reinstall on each test box

Time Consuming

Setting.WebPackage("ReplayType")◦ 1 - Runs mouse operations using browser events.

◦ 2 - Runs mouse operations using the mouse.

Example enabling “Save” button:Setting.WebPackage("ReplayType") = 2„ next line will enable “Save” button.WebList("class:=gwt-ListBox").Select “First”Setting.WebPackage("ReplayType") = 1If .WebButton("Save").GetRoProperty(“disabled”) Then….Another use of this technique – getting Tooltips from GWT

objects

Test Automation for Web 2.0 RIA applications is more challenging than automating traditional Web applications

Cooperation with development team is essential for automation success

RIA applications aren‟t look alike because of variety of widget sets can be used for development

Advanced test automation expertise is required

Rich Seeley - “How to sort out Ajax and RIA frameworks”

Paul Tuohy - “What Is AJAX?” www.ajaxwith.com Wikipedia www.qaforums.com www.advancedqtp.com www.vidbob.com http://download.instantiations.com/D2WBDoc/con

tinuous/latest/docs/html/features/gwt/gxt.htm

Company: Connected Testing, Inc.

E-Mail: igershovich@connectedtesting.com

Phone: 720-933-9395

Website: www.connectedtesting.com

39 ©2010 Hewlett-Packard Development Company, L.P.

To learn more on this topic, and to connect with your peers after

the conference, visit the HP Software Solutions Community:

www.hp.com/go/swcommunity