Automating Web 2.0 AJAX-based applications with QTP.

Fun with GWT apps.

Igor GershovichConnected Testing, Inc.www.connectedtesting.com

Rich Internet Applications (RIA)

Web 2.0 applications or RIA are Web Applications with some features of desktop applications

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

RIA Frameworks/Toolkits

Adobe Flash/Flex Google Web Toolkit (GWT) Microsoft Silverlight dojo Curl jQuery And 200 or 300 others

RIA technologies

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

Microsoft Silverlight and Adobe Flex have proprietary runtime technologies

RIA Youtube.com relies on Adobe Flash for Video playback

What is AJAX? 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.

Advantages of AJAX

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

The single page interface increases user interactivity

Disadvantages of AJAX

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

Simple AJAX application

Clicking on Adelie

Information From Server

This is what happened behind the screen after clicking on link

Internet

ServerClient

4. Client processes XML Docusing JScript and updates Web page

3. Server sends HTTP Response With XML Data

1. Client creates XmlHttpRequestobject using JScript then sendsHTTP request

2. Server processes theHTTP request

Does QTP support AJAX?

What people really want to ask:

Does QTP work with custom objects from various JavaScript toolkits?

What is GWT?

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

There are numerous widget libraries available for GWT

How GWT works in a nutshell

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.

Challenges

Custom or 3rd party Web controls No unique object properties Synchronization for AJAX Cascading Style Sheets (CSS) No common design framework between

GWT applications

Automating GWT with QTP

HP QTP Team Commitment ( QA Forums)

The new Web 2.0 Feature Pack for HP Functional Testing (FT 10.0) has been released yesterday (10/07/09):

• “Out of the box” support for the most common Web 2.0 technologies, including: o Silverlight 3.0 o 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

IE Developer toolbar

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 IE Developer supplements QTP Object Spy

which is lacking spying on CSS properties, DOM structure, Web Table cells, etc.

IE8 Developer Tools – F12 to invoke

AJAX Synchronization“.Sync” method doesn’t work with GWT applications since page is not getting

reloaded

Use “.Exist” property for ObjectsIf .WeEdit(“”).Exist(seconds) Then

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:http://relevantcodes.com/qtp-synchronization-for-ajax-applications/http://www.vidbob.com/qtp/ajax-and-javascript-toolkits.html

CSS considerations

QTP sees all the objects in CSS-based applications, even if objects are hidden

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

To verify that part of HTML page is visible use “Style.display” propertyIf .WebTable().Object.Style.Display = “block” ‘visible

…

If .WebTable().Object.Style.Display = “none” ‘not visible

Object properties

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 every web object

Working with Custom objects

2 types of Custom objects:• Panels/Dialog boxes – they are like Frames in

standard HTML. We normally don’t do any work on them. They are just a part of object hierarchy

• Custom objects like Grids, Comboboxes, Trees, etc.

We do perform actions on them.

Working with Custom objects

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)

Panels/Dialog boxes with Web Extensibility

Panels/Dialog boxes - no Web Extensibility

Dialog box Included in Object Hierarchy. ObjectRepository/Descriptive Programming approach

Dialog box excluded from Object Hierarchy

Dialog box Included in Object Hierarchy. ObjectRepository only approach. Btn_Tags object movedManually under Dialog box in OR hierarchy

Custom controls: Grids, Comboboxes, Trees…

Tree

Grid

Custom controls: Grids, Combo-boxes, Trees…

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

Combobox is a collection of objects

WebElements (children)

Image

WebEdit

WebElement (parent)

Problems with Web Extensibility add-in

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

Troubleshooting is difficult Distribution/Redistribution challenges –

Custom Add-in needs to be install/reinstall on each test box

Time Consuming

Traditional or Web Extensibility approach

At present moment, I stay with Traditional approach – using VBScript functions and classes

Note: We are planning to evaluate just released “Web 2.0 Feature Pack for QTP 10.0”

10.0 Extensibility Accelerator

QTP/IE Memory leaksUPDATE: Fixed for QTP 9.5 – Patch QTPNET0033

Web 2.0 applications have several times more objects on the page than traditional web applications, which means memory leaks, CPU utilization are more severe and test execution is much longer. We observed several RIAs at different clients – these applications had 800 -1,200 Web objects on a page.

QTP/IE Memory leaks QTP creates objects in IE6/IE7 (IE8 – not tested) virtual

memory - browser needs to be reopened to release these objects

Memory leak is much smaller when OR used, comparing with DP.

Test Execution is faster with OR CPU utilization is less with OR When DP cannot be avoided, adding objects to the object

hierarchy will reduce memory Leak More on this topic:

www.connectedtesting.com/Articles/QTP-IE%20Memory%20Leaks.pdf

Changing QTP Web ReplayType from Event to Keyboard/Mouse 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

Conclusions

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.

Resources 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 www.connectedtesting.com/Articles/QTP-IE

%20Memory%20Leaks.pdf