Automating MyAppInFlex.swf – Useful FlexPilot commands

I continue automating my Flex application with FlexPilot. One clear advantage I found when using FlexPilot is that I was able to access more of the UI elements of a complex Flex interface. The other tools I tried weren’t picking all those elements, but I must admit that I didn’t investigate further.

An interesting feature is FlexPilot’s chain syntax, that allows to access flex UI elements by different properties, like id, label or text. Another feature I liked is easier integration to work with selenium RC and selenium IDE.

Below some usage examples to create automated tests for MyAppInFlex.swf, and also serve as a quick reference on how to interact/access the flex UI.

Click on a Button

The easiest way to access an element is using the element’s id, for example click on a button:

selenium.flexClick("id=MyAppInFlex", "chain=id:okButton");

If the button you are trying to access doesn't have an id, you are able to find it using the label property:

selenium.flexClick("id=MyAppInFlex", "chain="id:buttonBar/label:Search");

Access an element on a Grid

Click an element that has an specific value on a Grid

selenium.flexClick("id=MyAppInFlex", "chain="id:userGrid/name:AdvancedListBaseContentHolder*/name:AdvancedListBaseContentHolder*/text:Maria Marcano");

Check the value on a TextInput

Check a textbox has a specific value

selenium.flexAssertProperty("id=MyAppInFlex", "chain="id:emailTextBox, validator=text|emailvalue@domain.com", );

To improve the application testability, add id’s to the objects you want to access. This also applies for web application in general (accessing elements by id’s is faster than processing xpath expressions).

Some limitations

Elements on a grid can’t be accessed by position, for example click on the first/second element on a grid.

I’ve been experiencing some issues with some application builds that prevent the use of the flex explorer and recorder (reported the bug, hopefully it gets fixed soon). You can still run the tests, just not using those tools to capture the elements.

CruiseControl.Net and MSTest

I wanted to put together some notes about CruiseControl.Net and MSTest to have it as reference:

First, to be able to generate reports the following element is required on ccnet.config file.

<xmllogger />     

this element is used to create the log files read by the CruiseControl.NET web page, if it isn't defined the web page will throw the following error:

Exception Message
Request processing has failed on the remote server: Unable to find Log Publisher for project so can't find log file.

To view the MSTest report, we need to add the result file in ccnet.config to merge the content in the build report, for example :

..................
<exec>
  <executable>C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\IDE\MSTest.exe</executable>        
  <baseDirectory>.\</baseDirectory>
  <buildArgs> /testcontainer:SeleniumSearch\bin\Debug\SeleniumSearch.dll /resultsfile:Results\results1.trx</buildArgs>
</exec>     
tasks>
<publishers>
<merge>
  <files>
    <file>.\Results\results1.trx</file>
  </files>
</merge> 
<xmllogger />
</publishers>
..................

Include the MSTest plugin to generate the report on the web page, for example dashboard.config file

..................
<buildPlugins>
  <buildReportBuildPlugin>
    <xslFileNames>
      <xslFile>xsl\header.xsl</xslFile>
      <xslFile>xsl\modifications.xsl</xslFile>
      <xslFile>xsl\MsTestSummary2008.xsl</xslFile>          
    </xslFileNames>
  </buildReportBuildPlugin>
  <buildLogBuildPlugin />
  <xslReportBuildPlugin description="MSTest2008 Report" actionName="MSTESTReport" xslFileName="xsl\MsTestReport2008.xsl"/>             
</buildPlugins>
..................

And include the xls file for MSTest report on ccservice.exe.config/ccnet.exe.config

..................
<!-- Specifies the stylesheets that are used to transform the build results when using the EmailPublisher -->
<xslFiles>
    <file name="xsl\header.xsl"/>
    <file name="xsl\compile.xsl"/>
    <file name="xsl\unittests.xsl"/>
    <file name="xsl\MsTestSummary2008.xsl"/>        
    <file name="xsl\fit.xsl"/>
    <file name="xsl\modifications.xsl"/>
    <file name="xsl\fxcop-summary_1_36.xsl"/>
</xslFiles>
..................

The xls used on the above example is the one included in ccnet installation. I tested the report generation running tests on VS 2010 and VS 2008 and both reports are generated correctly. The only thing that caused issues was having MSTest on the path windows environment variables on a computer that has both VS 2010 an VS 2008

Also, if MSTest needs to connect to external resources, like accessing remote files or connecting to SQL Server, make sure the account that runs CruiseControl.Net Server windows service (by default is Local System Account) has access to those resources.

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)

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", "");
    }
}