Web Testing

Functional Testing a Flash/Flex Application

Flash has become a popular method for adding animation and interactivity to web pages. Flash is commonly used to create animation, advertisements, and various web page components, to integrate video into web pages, and more recently, to develop rich Internet applications. Flash can manipulate vector and raster graphics and supports bidirectional streaming of audio and video. It contains a scripting language called ActionScript. Several software products, systems, and devices are able to create or display Flash content.

We are going to use Play List example for this tutorial. This is a simple example that uses some of the Flex components. In this tutorial, we will study how to make a Flex application testable and then build this Flex application using either Flex Builder or freely available Flex SDK to record/replay it using AppPerfect Web Test.

This tutorial provides a brief introduction to the AppPerfect Web Test product using a set of hands-on practice exercises. This tutorial assumes you have successfully downloaded and installed AppPerfect Web Test on your machine with the default options. Apart from this pre-requisite, this tutorial is self contained.

This document is divided into following sections

  1. Required softwares to build Flex application
  2. Building Flex application
  3. Creating Web Test Project
  4. Recording/Replaying a Flex application

Within each section, multiple exercises are listed. Each exercise forms a logical unit which is expected to take no more than a few minutes to perform.

All exercises assume you have installed the product in C:\AppPerfect\WebTest folder and will be referred as WEBTEST_HOME henceforth in tutorial. If you have installed the product in some other folder, modify the instructions below appropriately.

This tutorial is not intended as a comprehensive training guide. Please refer to the product documentation for detailed information. However, this tutorial will give you a very good overview of the products and substantially improve your productivity with the product.

Required softwares to build Flex application

Exercise 1: Creating required environment for building Flex application

If you are already in a process of developing a flex application, you must be having the required environment configured. You will be either using Adobe® Flex® Builder which is the easiest way to develop rich Internet applications for the web OR you will be building your flex applications using a freely available Flex SDK.
To download the latest version of any of these softwares, please visit Flex Downloads. Select Flex Builder (which is a commercial product from Adobe) or Flex SDK in this page. If you have selected Flex Builder, download it and install it. If you have selected Flex SDK , it will show you list of available downloads for Flex SDK, Please download all the files i.e. Flex SDK, Flex Data Visualization Components and Flex Automation Libraries. Once all the files are downloaded, please extract flex_sdk_3.5.zip in C:\FlexSDK (Henceforth referred as FLEX_SDK_HOME in the tutorial). Now extract datavisualization_sdk3.5.zip in FLEX_SDK_HOME and automation_sdk3.5.zip in FLEX_SDK_HOME\frameworks folder.

Note: We are now ready to build a flex application either using Adobe Flex Builder OR freely available Flex SDK and its additional components.

  • If you are using Flex Builder, the FLEX_SDK_HOME refers to C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0 folder.
  • If you are using Flex SDK, the FLEX_SDK_HOME refers to C:\FlexSDK folder in which flex_sdk_3.5.zip was extracted.

Verify that FLEX_SDK_HOME\bin folder has mxmlc.exe (Windows platform) and mxmlc (Non-Windows platform) files and FLEX_SDK_HOME\frameworks\libs folder has automation.swc, automation_agent.swc, datavisualization.swc and other files an folders. If you do not have these files, please repeat exercise "Creating required environment for building Flex application".

Building Flex application

Exercise 1: Building flex application using Flex SDK

If you normally use Flex SDK to build your flex applications, it means you are either compiling your flex applications using batch files or shell scripts or you are using an IDE of your own choice. To include the automation.swc and automation_agent.swc libraries, you can add them to the compiler’s configuration file or as a command-line option.

Compiler’s configuration file changes

For the Adobe Flex SDK, the configuration file is located at FLEX_SDK_HOME/frameworks/flex-config.xml. For Adobe Flex Data Services, this file is located at FLEX_SDK_HOME/flex/WEB-INF/flex/flex-config.xml file. Add the following code to the configuration file:
  <include-libraries >
<library>/libs/automation.swc</library>
<library>/libs/automation_agent.swc</library>
<library>WEBTEST_HOME/apwebtest.swc</library>
  </include-libraries>
If your application uses charts, you must also add the automation_charts.swc file to the include-libraries compiler option.

Explicit command-line option

You can also specify the location of the automation.swc and automation_agent.swc files when you use the command-line compiler with the include-libraries compiler option. The following example adds automation.swc and automation_agent.swc files to the application:

mxmlc -include-libraries+=FLEX_SDK_HOME/frameworks/libs/automation.swc;FLEX_SDK_HOME/frameworks/libs/automation_agent.swc;WEBTEST_HOME/apwebtest.swc MyApp.mxml

If your application uses charts, you must also add the automation_charts.swc file to the include-libraries compiler option. Explicitly setting the include-libraries option on the command line overwrites, rather than appends, the existing libraries. As a result, if you add the automation.swc and automation_agent.swc files by using the include-libraries option on the command line, ensure that you use the += operator. This appends rather than overwrites the existing libraries that are included.

Exercise 2: Building FlexExample application using Flex SDK

FlexExample application is bundled with AppPerfect Web Test in WEBTEST_HOME\docs\FlexExample folder. Please do the following:

  1. Open a command prompt and make WEBTEST_HOME\docs\FlexExample as your current folder.
  2. Edit build.bat file present in WEBTEST_HOME\docs\FlexExample. Specify value for FLEX_SDK_HOME as per your local settings. i.e. C:\FlexSDK and save the file. All other environment variables would have been set properly during installation.
  3. Execute build.bat file which compiles FlexExample application.

    4. This will create FlexExample.swf in WEBTEST_HOME\docs\FlexExample\html-template folder.

  4. FlexExample is build for functional testing, now we will deploy this application to Tomcat server
  5. Create FlexExample folder in WEBTEST_HOME\tomcat\webapps directory
  6. Copy all the files and folders present in WEBTEST_HOME\docs\FlexExample\html-template to WEBTEST_HOME\tomcat\webapps\FlexExample folder
  7. Copy WEBTEST_HOME\docs\FlexExample\WEB_INF folder to WEBTEST_HOME\tomcat\webapps\FlexExample folder
  8. Copy WEBTEST_HOME\WebTestEnv.xml file to WEBTEST_HOME\tomcat\webapps\FlexExample folder

Congratulations, FlexExample is deployed in built-in Tomcat server and is ready for testing.

Exercise 3: Building flex application using Flex Builder

If you normally use Adobe Flex Builder (commercial product) to build your flex applications, then application takes care of most of the things. You only need to configure the compiler options to include few additional libraries.

  1. In Flex Builder, select Project > Properties. The Properties dialog box appears.
  2. Select Flex Compiler.
  3. In the Additional compiler arguments field, enter the following command, and click OK. -include-libraries "FLEX_SDK_HOME\frameworks\libs\automation.swc" "FLEX_SDK_HOME\frameworks\libs\automation_agent.swc" "WEBTEST_HOME/apwebtest.swc". In Flex Builder, the include-libraries compiler option is relative to the Flex Builder installation directory; the default location of this directory on Windows is C:\Program Files\Adobe\Flex Builder 3\. If your application uses charts, you must also add the automation_charts.swc file.

Flex Builder will now take care of building you flex application by including the required libraries for functional testing.

Exercise 4: Building FlexExample application using Flex Builder
  1. Start Flex Builder IDE, select File > Import. Select Import.... Now select Existing project into Workspace.
  2. In select root directory, select WEBTEST_HOME\docs\FlexExample and click Refresh. Now click Finish.
  3. In Flex Builder, select Project > Properties. The Properties dialog box appears.
  4. Select Flex Compiler.
  5. In the Additional compiler arguments field, enter the following command, and click OK. -include-libraries "FLEX_SDK_HOME\frameworks\libs\automation.swc" "FLEX_SDK_HOME\frameworks\libs\automation_agent.swc" "WEBTEST_HOME/apwebtest.swc".
  6. Flex Builder will now take care of building you flex application by including the required libraries for functional testing. This will create FlexExample.swf in WEBTEST_HOME\docs\FlexExample\html-template folder.
  7. FlexExample is build for functional testing, now we will deploy this application to Tomcat server
  8. Create FlexExample folder in WEBTEST_HOME\tomcat\webapps directory
  9. Copy all the files and folders present in WEBTEST_HOME\docs\FlexExample\html-template to WEBTEST_HOME\tomcat\webapps\FlexExample
  10. Copy WEBTEST_HOME\WebTestEnv.xml file to WEBTEST_HOME\tomcat\webapps\FlexExample folder

Congratulations, FlexExample is deployed in built-in Tomcat server and is ready for testing.

Creating Project

Exercise 1: Launch AppPerfect Web Test
  1. Click on Start -> Programs ->AppPerfect Web Test x.x.x -> AppPerfect Web Test
  2. On launching AppPerfect Web Test a Welcome page will be displayed. Go through the brief description given for product.
    NB: Welcome page is displayed only when Web Test x.x.x is launched and last time no project was opened.
Exercise 2: Creating a Project
  1. Launch the Define New Project dialog by clicking File ->New... menu option. The New Project wizard will be launched.
  2. Keep the default project name and location for the purpose of this exercise. We don't have to provide "Notification" settings. Click on the OK button.
  3. A confirmation message saying that the project is saved will be displayed. Click on the OK button.

Now using this project we will create tests to demonstrate the functionality of AppPerfect Web Test product.

Exercise 3: Define a Web Test project
  1. Once the project is successfully created another dialog - Define Project Properties dialog - will be displayed.
  2. In Test Recording step, Select the check box "Record events on flex elements". Provide WEBTEST_HOME\tomcat\webapps\FlexExample\FlexExample.swf path in Flash file text field and select Validate button. It will display, Flash components/elements can be recorded/replayed with AppPerfect Web Test. Click on Finish button.
  3. Click through all the menu items to familiarize yourself with the available features and how to access them. Viewing through all menu items will give a reasonable overview of the application.
  4. Open the Preferences dialog by selecting the menu option Tools -> Options...
  5. Review the default settings for Web Test and click the OK button to close the dialog.

Recording/Replaying a Flex application

Exercise 1: Recording a Test
  1. Start tomcat server by selecting Start->Programs->AppPerfect Web Test x.x.x->Documentation and Examples->Examples->Tomcat running Petstore->Start Server.
  2. To start recording, click on Project -> Record test... in the menu bar.
  3. 'Record a test' dialog will be displayed. Select ActionGroup1 from the Group combo. Provide starting URL as "http://<IP address >:8392/FlexExample". Do not specify localhost or 127.0.0.1. Now Click on 'Start recording' button to start recording.
  4. An instance of configured browser will be launched with the Flex Example's home page loaded. This home page shows Flex application loaded in it, Its a PlayList of songs.
  5. Select Artist button to sort the current list by Artist
  6. Select Year button to sort the current list by Artist
  7. Click on Unbelievable (1991) - EMF [90's, Pop] in the list. This will show the details of this track.
  8. Click on New Song button.
  9. Provide Title of a new track. SET IT OFF
  10. Provide Artist of a new track. Cody Carson
  11. Select the year of this track. 2009
  12. Select Genre(s) of this track. Pop
  13. Select Add Song button, to find the newly added song in the list
  14. Close the browser and then stop recording
  15. Check the Editor tree to see the Flex events recorded.
Exercise 2: Executing a test - Watching the actions of flash component
  1. To execute the test, click on Project -> Run from the menubar.
  2. You can see the browser getting launched and replaying each and every event recorded
  3. After the replaying is finished, it will switch to Results view. In Result view you can analyze the final result.
Library z-lib
We use cookies for analytics, advertising and to improve our site. By continuing to use our site, you accept to our Privacy policy and allow us to store cookies.