Home > Flash/Flex/AIR > Flash & Flex Selenium

Flash & Flex Selenium

I. Flash Selenium

1)Flash Selenium: An extension to the Selenium RC client driver that enables the Selenium RC client test drivers to call ActionScript methods of the Flex application. FlashSelenium relies in the developer to manually expose the Flex application specific methods and component

2)Flash/Flex Inside:
Flash Selenium actually integrates with flash by javascript. All functions in flash, need for testing, must be declared before compiling by ExternalInterface.addCallback. For example:

ExternalInterface.addCallback(“getColorLoginButton”, getColorLoginButton);

//Define the getColorLoginButton function

public function getColorLoginButton():uint {

return loginButton.color;

}

3)Using remote control / tools:
Selenium RC (Selenium Remote Control) is a tool that allows you to launch browser sessions and run Selenium tests against those browsers. To do this, the Selenium RC server acts as an intercepting proxy for the browser.

Using Selenium Remote Control, based on JUnit test case testing (we can use other languages such as: dotnet, ruby, php). Download here http://selenium.googlecode.com/files/selenium-remote-control-1.0.3.zip
and add Flash Selenium to your classpath to compile on http://flash-selenium.googlecode.com/files/flashselenium-java-client-extension-1.0.jar.

Some code needs for Test Case:

package com.thoughtworks.selenium.samples;

import com.thoughtworks.selenium.DefaultSelenium;

import com.thoughtworks.selenium.FlashSelenium;

import com.thoughtworks.selenium.Selenium;

import com.thoughtworks.selenium.SeleniumException;

import junit.framework.TestCase;

public class ColorsTest extends TestCase {

private FlashSelenium flashApp;

private Selenium selenium;

private final static String GREEN = “GREEN”;

public void setUp() {

selenium = new DefaultSelenium(“localhost”, 4444, “*firefox”,URL);

selenium.start();

flashApp = new FlashSelenium(selenium, “ColorTest”); //ColorTest: is the name of the swf file

selenium.open(URL);

assertEquals(100, flashApp.PercentLoaded());

}

public void tearDown() {

selenium.stop();

}

public void testColorTransition() {

assertEquals(GREEN, flashApp.call(“getColorLoginButton”)); //getColorLoginButton is declared before by ExternalInterface when compiling flash.

}

}

flashApp was got from embed html and can call all functions that were declared before by ExternalInterface (see 2).

Working to write a test case in Eclipse

SUMMARY:

Useful:
FlashSelenium is useful for testing both Flash and Flex applications, basically for all actionscripts project. The tester can import a list of test case and runs them automatically, and then see the report immediately.
-It is useful for non-flash developers who don’t know actionscript. The testers only know Junit and are familiar with executing a basic Selenium RC Java client JUnit test.
Inconvenience:
-But it maybe is difficult for Flash/Flex developers, they have to use two languages for implementation and testing, they must study Selenium RC Java client Junit Test (That is a reason we have FlexUint & AsUnit for testing automation)
-One more inconvenience, the flash developer must delete all ExternalInterface, they added for testing before, to keep security in release build. That means that flash/flex application must re-build again and maybe they must test again to keep the same quality as the previous build which was tested completely.

II. Flex UI Selenium:

FlexUISelenium is an extension to the Selenium RC client driver that enables the Selenium RC client drivers to interact (and test) the Flex UI components and methods of the Flex application.

Setting Up the Selenium-Flex APIInstall Firefox

The Selenium IDE is a plugin for the Firefox web browser so this needs to be installed first. Go to the Firefox website (http://firefox.com), download and install the latest release.

Download source code here http://sourceforge.net/projects/seleniumflexapi/files/

*Note: Because of a current bug, only Firefox version 2 is supported.

Install Selenium-IDE

Now we need to install the Selenium-IDE for Firefox. Once Firefox is installed, launch it and navigate to the Selenium-IDE page on the Open-QA website.

http://selenium-ide.openqa.org/

It is recommended you install version “Selenium IDE 1.0 Beta 1” or greater. The plugin will attempt to download and install from the within browser.

*Note: Because of a current bug, Selenium-Flex API only suport Selenium IDE version 1.0 Beta 1.

NOTE: Make sure that openqa.org has permissions to install plugins on your Firefox browser. If not you’ll notice a bar at the top of the browser window telling you that openqa.org doesn’t have permissions to install add-ons on your computer. Click the ‘Edit Options…’ button and give openqa.org the permissions. Then try the link again.

Add the Selenium-Flex API Commands to Selenium

Once Selenium is installed on Firefox, launch it from Firefox by going to Tools ¢ Selenium IDE on the menu.

From the Selenium IDE click on the menu item Options ¢ Options to bring up the options dialog.

For the Selenium Core extensions, click browse and go to the folder containing the files for Selenium-Flex API and select the file ‘user-extensions.js’

Now click ok on the options dialog.

NOTE: Now you’ll have to restart the Selenium IDE before the new ‘Flex-enabled” commands be available.

Adding the Selenium-Flex API to your Flex Application

In order for the Selenium-Flex plugin to be able to access your Flex Application for testing you will need to include the SeleniumFlexAPI.swc in the compile arguments when building for Flex Application.  See \Sample Application\Flex3StyleExplorer\SeleniumFlex API Setup.pdf for detailed steps on setting up your application to include the SeleniumFlexAPI.swc file when compiling.

Writing Test Scripts with the Selenium-Flex API

To create a Selenium Script against the Sample Application (Flex 3 Style Explorer) follow these steps:

Assumed steps:

  1. You have compiled the Sample Flex Application with SeleniumFlexAPI.swc as a compile argument
  2. You have deployed the Sample Flex Application to a web server
  3. You can access the Sample Flex Application that you have deployed in a web browser, i.e.: http://my.webserver.com/Flex3StyleExplorer/Flex3StyleExplorer.html
  4. You can configured the Selenium IDE to point to the user-extensions.js file and restarted Selenium IDE

Steps to create a simple test script:

  1. Open Firefox and bring up your Sample Flex Application, i.e.: http://my.webserver.com/Flex3StyleExplorer/Flex3StyleExplorer.html
  2. Open the Selenium IDE
  3. In the Selenium IDE, C\click in the blank area under the heading Command

  1. This will enable the Command drop down list
  2. Select flexSetFlexObjID from the Command drop down list
  3. Type Flex3StyleExplorer in the Target text box

    1. *Note, the Target for the flexSetObjectID is the name of the Flash object in the HTML page containing the Flex application.  Typically this is the name of the main mxml application without the mxml extension.

7. Click the Find button.  It should find your Sample Flex Application and highlight it (draw a box around it) briefly.  This will let you know that you have everything set up correctly. If you get any errors under Log in the Selenium IDE then you know that something is setup incorrectly.

  1. Click under the flexSetObjID command that was inserted

  1. Mouse over some objects in the Sample Flex Application

    1. *Note that the ID’s of the objects pop up.  These are the names that you will place in the Target field to perform actions on those objects.
  2. Select flexType from the Command drop down list
  3. Type textBox1 in the Target text box

    1. *Note that the target names are case sensitive, so textBox1 is not the same as textbox1
  4. Type .75 in the Value text box
  5. Click under that command in the test command list so that you can add another command
  6. Select flexSelect from the Command drop down list
  7. Type icecream in the Target text box
  8. Type Strawberry in the Value text box

    1. *Note that the value names are case sensitive, so Strawberry is not the same as strawberry
  9. Click under that command in the test command list so that you can add another command
  10. Select flexSelect from the Command drop down list
  11. Type mybackgroundImageapplication in the Target text box
  12. Type redstripe in the Value text box
  13. Click on the green arrow with three green stripes next to it to run your script

  1. It should change the background to red, change the value in the gradient text to to .75 and change the selected ice cream to Strawberry
  2. To add test points to your script for verifying functionality
  3. Click under the last command in the test command list so that you can add another command
  4. Select verifyFlexTextPresent from the Command drop down list
  5. Type textBox1 in the Target text box
  6. Type .75 in the Value text box
  7. Click under the last command in the test command list so that you can add another command
  8. Select verifyFlexTextPresent from the Command drop down list
  9. Type _applicationView_TextArea1 in the Target text box
  10. Type redstripe in the Value text box
  1. Click on the green arrow with three green stripes next to it to run your script

SUMMARY:

Useful:

-It actually has the same useful things as FlashSelenium in the previuos part. Working with Selenium IDE is useful & cool plugin and help the testers to create the test case and get the result quickly. Besides, they don’t also need to know coding so much.

Inconvenience:

-The flash developers must add the Selenium-Flex API to their Flex Application and the build will include this API, that makes the swf files bigger with code, maybe run slower and they must rebuild again for the release build by removing the Selenium-Flex API.

-Selenium IDE only support Firefox 2.0. It is noted in Selenium IDE document: *Note: Because of a current bug, only Firefox version 2 is supported

-We can use Junit as FlashSelenium, but the flash developers will meet difficulties in working with Junit and Selenium RC Java client Junit Test

//

  1. 05/05/2013 at 5:49 pm

    A fascinating discussion is worth comment. I believe that
    you ought to write more about this subject, it may not be a taboo subject but generally people don’t speak about such topics. To the next! Best wishes!!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: