Transcript RIA, WEB 2.0, AJAX, GWT and more

Automating Web 2.0
AJAX-based applications
with QTP.
Fun with GWT apps.
Igor Gershovich
Connected 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
4. Client processes XML Doc
using JScript and updates
Web page
3. Server sends HTTP
Response With XML Data
Internet
Client
1. Client creates XmlHttpRequest
object using JScript then sends
HTTP request
Server
2. Server processes the
HTTP 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 Objects
If .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 properties
Browser("").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” property
If .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 excluded from Object Hierarchy
Dialog box Included in Object Hierarchy. Object
Repository/Descriptive Programming approach
Dialog box Included in Object Hierarchy. Object
Repository only approach. Btn_Tags object moved
Manually under Dialog box in OR hierarchy
Custom controls: Grids,
Comboboxes, Trees…
Tree
Grid
Custom controls: Grids, Comboboxes, 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
WebEdit
Image
WebElement (parent)
WebElements (children)
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 leaks
UPDATE: 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/QTPIE%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") = 1
If .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/QTPIE%20Memory%20Leaks.pdf