Wednesday, August 18, 2010

Selenium Testing with FlexPilot

I continued my quest for a solution to create automated tests using seleniumRC and C# and this time I took a look at this new project called Flex Pilot.

FlexPilot is a open source testing tool that integrates with selenium,  it has a bootstrapper to make the application testable, it is able to use a selenium IDE recorder, and you can access elements using chain syntax (like accessing with xpath).

Here is what I did to start building tests with flex pilot:

  • Rebuilded flexpilot: source is http://github.com/mde/flex-pilot/archives/master and excecuted build.py this will update FlexPilot.swf and FPBootstrap.swf  located under org/flex_pilot folder (place this file where the app is located)
  • Copied the content from src/org/flex_pilot folder to the flex's app libs folder example C:\source\MyAppInFlex\libs
  • Imported Bootstrap in the flex app
    import org.flex_pilot.FPBootstrap;

  • Set FPBootstrap.flex_pilotLibPath the path on the server where FPBootstrap can find FlexPilot.swf. The Loader fetches FlexPilot.swf via a Loader class.

    FPBootstrap.flex_pilotLibPath = '/flash/org/flex_pilot/FlexPilot.swf';

  • Initialize FPBootstrap this fetch and load FlexPilot.swf, and gives FlexPilot Flash a context to use for testing. This context is usually a reference to app’s Stage.

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" creationComplete="init() 
    applicationComplete="
    initFlexPilot()">
    ......
    <mx:Script>
    <![CDATA[
    ...............
    import mx.utils.ObjectUtil;
    import org.flex_pilot.FPBootstrap;

    ...............
    private function initFlexPilot():void
    {
    FPBootstrap.flex_pilotLibPath = 'FlexPilot.swf';
    FPBootstrap.init(stage);
    }
    ......

  • Compiled application: mxmlc -source-path=. -source-path+=../libs MyAppInFlex.mxml -o MyAppInFlex.swf
  • If present, remove tags like <noscript> around the flex object in you html.
  • If the configuration is working Firebug will return “function” when calling document.getElementById('MyAppInFlex').fp_click 
  • This is the “hello world” example of a test method on c#

    [TestMethod]
    public void TestMethodFlexPilot()
    {
    selenium.Open("http://localhost/testapp.html");
    selenium.RunScript("document.getElementById('MyAppInFlex').fp_type({name:'usernameTextInput', text:'Flex Pilot'})");
    selenium.RunScript("document.getElementById('MyAppInFlex').fp_click({name:'secureCheckBox'})");
    }

FlexPilot has seleniumRC client drivers available for java, phyton and rubi (no c# client driver available yet)

Thursday, August 5, 2010

Setting up flex testing with selenium

Recently I was looking for tools to support automated testing for flex applications. I have a test suite in SeleniumRC and C# I was looking for options to continue using this environment. Here’s what I found:

FlashSelenium, Selenium Flex API

These two projects provides capabilities to interact with Flex UI components and web pages through selenium RC.

Selenium Flex API automatically exposes Flex APP UI and FlashSelenium  allowing us to call ActionScript methods to interact with Flex elements. Note that this approach requires us to compile our flex applications with Selenium Flex API library.

To start coding your test:

  • Rebuild your Flex application with sfapi.swc add the compiler argument:  -include-libraries "..\libs\sfapi.swc"
  • Include FlashSelenium.dll library in the seleniumRC test project.

To be able to run test on firefox you need to specify the browserString *firefoxproxy instead of *firefox since firefox doesn't like javascript calling flash when javascript comes from another window (the way selenium calls flash objects).

This a “hello world” example:

[TestClass]
public class MyAppInFlexTest
{
private ISelenium selenium;
private FlashSelenium.FlashSelenium flashApp;

[TestInitialize()]
public void SetupTest()
{
selenium = new DefaultSelenium("localhost", 4444, @"*firefoxproxy", @"http://localhost/testapp.html");
//selenium = new DefaultSelenium("localhost", 4444, @"*iexplore", @"http://localhost/testapp.html");
//selenium = new DefaultSelenium("localhost", 4444, @"*googlechorme", @http://localhost/testapp.html);
selenium.Start();
flashApp = new FlashSelenium.FlashSelenium(selenium, "MyAppInFlex");
}

[TestCleanup()]
public void TeardownTest()
{
selenium.Stop();
}

[TestMethod]
public void TestMethodFlashSelenium()
{
flashApp.Call("doFlexType", "usernameTextInput", "from selenium flex");
flashApp.Call("doFlexClick", "secureCheckBox", "");
}
}