Automating Web 2.0 AJAX-based applications with QTP. Fun with GWT apps.

1
Automating Web 2.0 AJAX-based applications with
QTP.Fun with GWT apps.

• Igor Gershovich
• Connected Testing, Inc.
• www.connectedtesting.com

2
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.

3
RIA Frameworks/Toolkits

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

4
RIA technologies

• Most of Rich Internet are based on AJAX
  (Asynchronous JavaScript XML) technology
• Microsoft Silverlight and Adobe Flex have
  proprietary runtime technologies

5
RIA Youtube.com relies on Adobe Flash for Video
playback
6
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.

7
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

8
Disadvantages of AJAX

• Some search engines are not equipped for
  AJAX-based applications
• Can be too much context on one page
• Bookmarks, Browsers Back or Forward navigation
  may not function as expected

9
Simple AJAX application
Clicking on Adelie
Information From Server
10
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
Server
1. Client creates XmlHttpRequest object using
JScript then sends HTTP request
2. Server processes the HTTP request
11
Does QTP support AJAX?

• What people really want to ask
• Does QTP work with custom objects from various
  JavaScript toolkits?

12
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

13
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.

14
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

15
Automating GWT with QTP
16
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
17
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.

18
IE8 Developer Tools F12 to invoke
19
AJAX Synchronization

• .Sync method doesnt 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 doesnt 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-a
  jax-applications/
• http//www.vidbob.com/qtp/ajax-and-javascript-tool
  kits.html

20
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

21
Object properties

• By default GWT doesnt 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

22
Working with Custom objects

• 2 types of Custom objects
• Panels/Dialog boxes they are like Frames in
  standard HTML. We normally dont 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.

23
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)

24
Panels/Dialog boxes with Web Extensibility
25
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
26
Custom controls Grids, Comboboxes, Trees
Tree
Grid
27
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

28
Combobox is a collection of objects
WebEdit
Image
WebElement (parent)
WebElements (children)
29
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

30
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

31
10.0 Extensibility Accelerator
32
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.

33
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/Artic
  les/QTP-IE20Memory20Leaks.pdf

34
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("classgwt-ListBox").Select First
• Setting.WebPackage("ReplayType") 1
• If .WebButton("Save").GetRoProperty(disabled)
  Then
• .
• Another use of this technique getting Tooltips
  from GWT objects

35
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 arent look alike because of
  variety of widget sets can be used for
  development
• Advanced test automation expertise is required.

36
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-IE20Memory
  20Leaks.pdf