RIA, WEB 2.0, AJAX, GWT and more

Igor Gershovich
Connected Testing, Inc.
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
And 200 or 300 others
Most of Rich Internet are based on AJAX
(Asynchronous JavaScript + XML)
Microsoft Silverlight and Adobe Flex have
proprietary runtime technologies
AJAX is a technique that combines and
exploits some long-standing Web
◦ 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
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
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
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
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 CSSbased 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
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
<INPUT> - WebEdit
<IMG> - Image
<DIV> - WebElement (parent)
<DIV> - WebElements (children)
Browser’s Status Bar isn’t relevant for GWT applications since page is not
getting reloaded
Verify that Object exist
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
If .WeEdit(“”).Exist(seconds) …
Browser("").WebList("").WaitProperty,"items count", micGreaterThanOrEqual(5)
More on this topic (QTP info):
Automating GWTbased applications
What people really want to ask:
Does QTP work with custom
objects from various
JavaScript toolkits?
There are 2 ways to work with custom
◦ 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-thebox
◦ 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 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
• “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
Distribution/Redistribution challenges –
Custom Add-in needs to be install/reinstall
on each test box
Time Consuming
◦ 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
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
Advanced test automation expertise is
Rich Seeley - “How to sort out Ajax and RIA frameworks”
Paul Tuohy - “What Is AJAX?”
Company: Connected Testing, Inc.
E-Mail: [email protected]
Phone: 720-933-9395
Website: www.connectedtesting.com

similar documents