Automate Flex Spark tests with IBM Rational Functional Tester 8.2.1

Richa Awasthy provides an overview of Rational Functional Tester Version 8.2.1 Flex Spark support and the skills you need to automate the Flex Spark testing environment. Rational Functional Tester supports Flex test automation for Spark controls for Flex 4.0 and 4.1 SDKs.

Richa Awasthy (rawasthy@au1.ibm.com), Staff Software Engineer, IBM

Author1 photoRicha Awasthy is a Staff Software Engineer at IBM in Australia. She is working on various quality management tools. She focuses on client satisfaction, so through articles on developerWorks, she hopes to enhance customers' knowledge of tools and make their jobs easier. Previously, she worked with the IBM Rational Functional Tester development team in India. She has made contributions and presentations in various workshops and sessions on automated testing Wants to make significant contributions in the field of quality engineering in the coming years. She is an active contributor to the Rational Quality Management Portfolio blog.



24 July 2012

Also available in Chinese Russian

IBM® Rational® Functional Tester enables you to automate regression testing of applications in various domains, such as Java, HTML, .NET, Microsoft Silverlight, Adobe Flex, and Dojo Toolkit. Version 8.2.1 added support for testing Flex Spark applications, along with several other new features. This article covers setup and script creation to test Flex Spark applications. You will learn how to enable the Spark application so that Rational Functional Tester can identify Spark controls. This will give you a better understanding and make it easier for you to use Rational Functional Tester for Flex Spark test automation.

Prerequisites

  1. Rational Functional Tester 8.2.1 or later version.
  2. Adobe Flash Builder 4.0 or later
  3. Adobe Flash Player 10.0 or later
  4. Microsoft Internet Explorer or Mozilla Firefox browser
  5. Java Runtime Environment (JRE)

Overview of Rational Functional Tester Flex testing support

Rational Functional Tester supports testing of Flex applications built on Flex SDK 2.0, onward. With the release of Flex 4, a new skin component architecture for Flex user interface components called Spark was introduced. Rational Functional Tester Version 8.2.1 onward supports testing of applications containing Flex Spark controls if they are built on Flex SDK 4.0 or 4.1. Testing of Flex applications requires steps to enable the Flex application so that it can be tested with Rational Functional Tester. Enablement involves adding reference to automation libraries in the Flex application. This can be done either at source code level or as runtime enablement. This article covers the enablement at source code level.


Add a reference to automation libraries in the Flex application

Flex application testing automation with Rational Functional Tester requires adding references to both Flex and Functional Tester Flex automation libraries. These libraries are actually the .swc files for automation. The Flex automation libraries get installed with Flash Builder, and the counterparts get installed with Rational Functional Tester.

You can use any of the following three ways to add references to automation libraries, and the subsections here explain each of them:

  • Add a reference in the Flash Builder IDE
  • Add a reference using the Rational Functional Tester Configure Application wizard
  • Add a reference by using the command line

Method 1. Add a reference in the Flash Builder IDE

  1. Start Flash Builder 4.0 or later, and create a new Flex project.
  2. Import the attached TestSparkwithRFT.mxml application.
    1. Select Flex Project > Src > Package.
    2. Right-click on the package, and click Import.
    3. Select General > File System.
    4. Click Next.
    5. Browse to the directory where the .mxml file is stored. From the right pane, select the .mxml file, and click Finish.
  3. Go to Project > Properties > Flex Compiler.
  4. In the Additional Compiler arguments text box, add the libraries from Listing 1.
Listing 1. Libraries to add
-locale en_US -include-libraries "C:\Program Files\Adobe\Adobe Flash Builder 4.x\sdks\
4.x\frameworks\libs\automation\automation.swc" 
"C:\Program Files\Adobe\Adobe Flash Builder 4.x\sdks\4.x\
frameworks\libs\automation\automation_agent.swc" 
"C:\Program Files\Adobe\Adobe Flash Builder
4.x\sdks\4.x\frameworks\libs\automation\automation_spark.swc" 
"C:\Program Files\Adobe\Adobe Flash Builder 4.x\sdks\4.x\frameworks\libs\automation\
automation_dmv.swc" 
"C:\Program Files\IBM\SDP\FunctionalTester\bin\rftFlex4.0.swc" 
"C:\Program Files\IBM\SDP\FunctionalTester\bin\rftProp_Flex4.0.swc"

Important:
Replace 4.x with appropriate Flash Builder and SDK versions in the above argument.

Note:
The path above is ideal in a 32-bit system. You need to modify the argument to point to the correct location of .swc files. After adding the above arguments, any Flex Halo or Spark application created in this project will be ready to be tested with Rational Functional Tester.

This code is intentionally broken to fit on the screen. Use the code listing download file for the proper code.

Figure 1. Flash Builder Project > Properties wizard with additional compiler arguments
Includes .swc files from both Flex and RFT
  1. Click Apply and then OK.

Flash Builder will compile the .mxml file, and the corresponding .swf and .html files will be created in the bin-debug location of the Flex Project. In this case, these two files will be generated:

  • TestSparkwithRFT.swf
  • TestSparkwithRFT.html

The Flex Spark application will be tested by using this .html file.

Method 2. Add a reference using the Rational Functional Tester Configure Application wizard

  1. Copy the attached TestSparkwithRFT.mxml file (see Downloads) into a directory on your C:\ drive. For example:
    C:\TestFlexSpark\)
  2. Launch the Application Configuration Tool wizard by selecting - Configure Applications for Testing from the Rational Functional Tester perspective.
  3. In the Application Configuration Tool wizard, click the Add button.
  4. Select Flex Application in the wizard, and then click Next.
Figure 2. The Add Application wizard
Flex Application selected as type of application
  1. Select Configure Flex application setup, and click Next.
Figure 3. Select the Flex application configuration type
Configure Flex application setup selected
  1. In the Flex application configuration wizard, select:
  • Local Application
  • Flex SDKs as 4.0/4.1 (because Spark support is from Flex 4.x onward)
  • OS type for your system
  1. Click Browse (the one against the Application text box) to select the Flex Spark Application file.
  2. Click Browse (the one against the SWF Target Location) to select the directory where the compiled Flex Spark Application .swf file should be generated.
Figure 4. The Add Application wizard to select Flex application configuration parameters
Parameters selected as described
  1. Select the Generate HTML Page check box so that an HTML page is generated corresponding to this Flex Spark application.

Note:
Flex applications can be tested only when they are loaded in an HTML browser. Rational Functional Tester does not support Flex applications in stand-alone Flash players.
The enabled HTML text box is populated based on the SWF Target location.

  1. Click Finish.

Notice that Spark application appears in the Applications list in the Application Configuration Tool. You could rename the added application at this point.

Method 3. Add a reference by using the command line

  1. Unzip the attached file in a location on your system. For example:
    C:\TestFlexSpark
  2. Start the command prompt (preferably an Adobe command prompt or a Microsoft Visual Studio command prompt).
  3. Go to the directory of the application (the directory of the unzipped file, which is C:\TestFlexSpark in this case).
  4. Run the batch file provided in the compressed file at the command prompt with the name of the .mxml file (also shown in the screen capture in Figure 5:
    C:\TestFlexSpark>buildsparkapplicationwithFlex41adaptor.bat TestSparkwithRFT.mxml
Figure 5. Command prompt showing the command to execute the batch file
Screen capture of the command line

Tip:
Appropriate batch files are provided in the Flex directory of the Rational Functional Tester installation.

After executing the above command, this swf file is generated:
TestSparkwithRFT.swf.

When you have this .swf file, you can embed it in an HTML page, for example TestSparkwithRFT.html (which contains the code in Listing 2) by using an object or embed tag as shown here.

Listing 2. Source code of the HTML page to load the Flex swf
<HTML>
<HEAD><TITLE>Flex Sample Application Testing</TITLE>
</HEAD>
<BODY>
<HR>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="myapp" width="100%" height="100%"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="TestSparkwithRFT.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value=#CCCCCC />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="TestSparkwithRFT.swf" quality="high" bgcolor=#CCCCCC
width="100%" height="100%" name="myapp" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
plug-inspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</BODY>
</HTML>

You can use the same HTML file for other Flex applications by changing just the .swf name in that code snippet.


Recording on a Flex application

If you followed the second method above, the Flex application is already configured, and you can see it listed in the StartApplication wizards list.

In the first and third methods, you can configure the Flex Spark application for testing by pointing to the corresponding HTML page.

  1. Launch the Application Configuration Tool wizard by selecting Configure Applications for Testing from the Rational Functional Tester perspective.
  2. In the Application Configuration Tool wizard, click the Add button.
  3. In the Add Application wizard, select Flex Application, and then click Next.
  4. Select Add URL of Flex Application.
Figure 6. Add Application wizard to add URL of the Flex application
Add URL of the Flex app (HTML file) to test
  1. In the text box, provide the path of the HTML file. For example, if you used the third method, you add this path:
    C:\TestFlexSparkApplication\TestSpark.html
  2. Click Finish.

The Spark application now appears in the Applications list in the Application Configuration Tool.

Record the test script

After you have configured the application, you are ready to start recording the test script against your Spark application.

  1. Start recording the Rational Functional Tester script by clicking Record.
  2. Enter the script name, select the script folder location, and then click Finish.
  3. Click Start Application in the recording window to select the Flex Spark application that you configured earlier.

The application starts in Internet Explorer (or your default browser). You can perform actions on the controls, and those actions get recorded.

Example of a recorded script

After you complete your test scenario, stop the recording, and the test script will be generated as shown in the sample test script in Figure 7, which shows that the Flex Spark objects and their corresponding events have been recognized. This enables users to capture and play back GUI-level interactions, to verify data and property, and to do data drive on Spark controls.

Figure 7. A sample Rational Functional Tester script with actions recorded on Flex Spark controls
script shows actions recorded on Spark controls
Figure 8. Sample object map shows hierarchy and properties of Spark controls
Also shows recognition, administrative properties

A few mandatory steps

To test Flex applications, the browser being used should be enabled. Enable the browser using the Enable Environments for Testing wizard of Rational Functional Tester, and ensure that the browser enablement test passes.

The application should be running from a trusted directory. Follow these steps to assign trust designations:

  1. Create a folder FlashPlayerTrust in one of these:
    • C:\WINDOWS\system32\Macromed\Flash on a 32-bit system
    • C:\Windows\SysWOW64\Macromed\Flash on 64-bit system
  2. Create a file named Flex without any file extension in the FlashPlayerTrust folder.
  3. Type the directory path of the Flex application in the Flex file. For example, in above case (in the second or third method) the Flex application is in C:\TestFlexSpark, so type the path in the Flex file as C:\TestFlexSpark.
  4. Save the file.
  5. Allow the ActiveX plug-in to load by clicking Yes on the warning dialog prompt when you load the Flex application in the browser.

If you are using the default HTML page generated by the Flash Builder IDE, the Flex controls do not get recognized.

  1. Open the HTML page in an editor.
  2. Delete this statement, which is at the beginning of the HTML page:
    <!-- saved from url=(0014)about:internet -->
Due to this statement, Rational Functional TesterFlexPlugin.dll does not get loaded in the browser, and that Flex application cannot be tested. If you are using Flash Builder and want to test those applications, modify the template of the HTML page to exclude that statement.

On a Microsoft Windows server, Rational Functional Tester needs to be run as administrator to record on Flex applications.


Troubleshooting tips

  • Error shown in Flash Builder IDE after adding the additional compiler arguments

Make sure that the path of the .swc files is correct.

  • The HTML page is blank after using the second method

Check whether the .swf file is created in the directory. If the .swf file is not created in the directory, see the instructions for the next problem.

  • When using the second method to add a reference, the .bat and .html files are is generated but no .swf file is generated

Try to execute the batch file manually at the command prompt. It will show the exact error, which could be related to the path of the .swc files. If the path of .swc files is not correct, modify the .bat file to point to the correct location of the .swc files, and then execute the batch file manually at the command prompt again. This should generate the required .swf file.


Tip:
For future references, it is advisable to modify the path in the FlexInstallInfo.properties file in the Flex directory of the Rational Functional Tester installation. Modifying the path in this file is a one-time task and resolves the problem while generating the .swf file using the Rational Functional Tester Application Configuration wizard. Restart Rational Functional Tester after modifying the FlexInstallInfo.properties file.

  • If you get this exception while executing the batch file manually (as mentioned in the previous problem):

Exception in thread "main" java.lang.UnsupportedClassVersionError: flex2/tools/Mxmlc (Unsupported major.minor version 49.0)

at java.lang.ClassLoader.defineClass0(Native Method)

at java.lang.ClassLoader.defineClass(ClassLoader.java:509)

Please set JAVA_HOME variable to point to higher version of JDK as jdk 1.6.

  • Nothing gets recorded though the environment is setup correctly.

Try these steps, and then restart the application"

  1. Access Settings Manager for your Flash Player.
  2. Open an application in Flash Player.
  3. Right-click and select Settings.
  4. Select the Privacy tab.
  5. Click Advanced. Adobe Flash Player launches a new browser window and loads the Settings Manager help page.
  6. Click the Global Security Settings link to open the Global Security Settings window.
  7. Add your application directory to the Secured or Trusted directory. In the "Always trust files in these locations" drop-down menu, click Add location, and browse for the location.

Note:
For more information about setting the security configuration, see the Adobe Web site.


Downloads

DescriptionNameSize
Code listing 1FlexSpark-listing1.txt1KB
Flex Spark sampleFlexSparkSample.zip3KB
Test Spark with RFTTestSparkwithRFT.zip6KB

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Rational software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Rational
ArticleID=826426
ArticleTitle=Automate Flex Spark tests with IBM Rational Functional Tester 8.2.1
publish-date=07242012