Flex functional testing with FunFx and Cucumber

August 20th, 2009 by Andrea Franz

Cucumber is a great tool I usually use for BDD in my ruby projects, but yesterday I tried it with Flex, and it was very enjoyable. Here a little example on how to test Flex applications with Cucumber.

First of all you need ruby, then you need to install the following gems:

sudo gem install rspec cucumber watir safariwatir funfx

(I used the following codes on mac os x, with ruby 1.8.6, safari 4.0.3 and funx 0.2.2)

After that open Flex Builder and create a new project called CucumberExample and use the following code for your main mxml file:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Number id="index">0</mx:Number>
	<mx:VBox width="300" height="200" backgroundColor="white">
		<mx:HBox width="100%" height="30">			
			<mx:Button id="buttonDecrement" label="-" width="100%" />
			<mx:Button id="buttonIncrement" label="+" width="100%" />
		</mx:HBox>
		<mx:HBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
			<mx:Label id="myLabel" text="{index}"/>			
		</mx:HBox>
	</mx:VBox>
</mx:Application>

As you can see, we have a number, 2 buttons and a label. Now create a directory called features inside your flex project folder and create the first Cucumber feature file, called counter:

CucumberExample/features/counter.feature:

Feature: Counter
  In order to count something
  As a flex rock star
  I want to use my great flex app
 
  Scenario: Increment index
    Given I open my flex app
    And I click the increment button
    Then the label text should be "1"
    When I click the decrement button
    Then the label text should be "0"
    When I click the decrement button
    Then the label text should be "-1"

It’s a test written in pure plain text.

In the features folder create another folder called step_definitions with a blank file called counter_steps.rb, we’ll use it later.

Now open the console, go the to flex project root and run your test:

cd /path/to/CucumberExample
cucumber features

You should see something like this:

...
1 scenario (1 undefined)
7 steps (7 undefined)
0m0.002s

You can implement step definitions for undefined steps with these snippets:

Given /^I open my flex app$/ do
  pending
end
 
Given /^I click the increment button$/ do
  pending
end
 
Then /^the label text should be "([^\"]*)"$/ do |arg1|
  pending
end
 
When /^I click the decrement button$/ do
  pending
end

Before implementing the steps above, we need to add the funfx component to our library.

Download the latest swc file from rubyforge and place it in your CucumberExample/libs folder (I used the version 0.2.2).

Duplicate the bin-debug folder and rename it to test (you have a bin-debug folder after the first time you run the CucumberExample from FlexBuilder).

Inside the test directory create a file called test_server.rb with the following content:

require 'webrick'
 
server = WEBrick::HTTPServer.new :Port => 9852, :DocumentRoot => File.dirname(__FILE__)
trap("INT"){ server.shutdown }
server.start

Now you need a compiled version of your project that includes funfx.We’ll use it just for testing:

build_test.sh

#!/bin/sh
FLEX_SDK_HOME="/Applications/Adobe Flex Builder 3/sdks/3.2.0"
"$FLEX_SDK_HOME/bin/mxmlc" -verbose-stacktraces -include-libraries ./libs/funfx-0.2.2.swc "$FLEX_SDK_HOME/frameworks/libs/automation.swc" "$FLEX_SDK_HOME/frameworks/libs/automation_dmv.swc"  "$FLEX_SDK_HOME/frameworks/libs/automation_agent.swc" -output ./test/CucumberExample.swf -- ./src/CucumberExample.mxml

Run test compile_test.sh

chmod 755 ./build_test.sh
./build_test.sh

Now open another terminal window and start the test server:

cd /path/to/CucumberExample/test
ruby test_server.rb

Open http://localhost:9852/CucumberExample.html with your browser and you should see your flex app.

Now you can come back to your features and implement the step we leave before. Here my implementation:

CucumberExample/features/step_definitions/counter_steps.rb

Given /^I open my flex app$/ do
  open_flex_app
end
 
Given /^I click the (increment|decrement) button$/ do |button|  
  click_button("button#{button.capitalize}")  
end
 
Then /^the label text should be "([^\"]*)"$/ do |text|
  label_text.should == text  
end

open_flex_app, click_button and label_text are methods defined in my env.rb file.

CucumberExample/features/support/env.rb

require "rubygems"
require 'funfx/browser/safariwatir'
 
module FlexWorld
  def open_flex_app
    @browser.goto("http://localhost:9852/CucumberExample.html")
  end
 
  def click_button(button_id)
    @flex_app.button(:id => button_id).click
  end
 
  def label_text
    @flex_app.label(:id => "myLabel").text
  end
end
 
Before do
  @browser  = Watir::Safari.new
  @flex_app = @browser.flex_app("CucumberExample", "CucumberExample")  
end
 
After do
  @browser.close
end
 
World(FlexWorld)

Now you are ready to run your tests. Start the test_server and then the features. You should have an error:

Then the label text should be "1"  # features/step_definitions/counter_steps.rb:9
      expected: "1",
           got: "0" (using ==)

This because we didn’t implement the functionality yet in our flex app. So, change the mxml file with the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Number id="index">0</mx:Number>
	<mx:VBox width="300" height="200" backgroundColor="white">
		<mx:HBox width="100%" height="30">			
			<mx:Button id="buttonDecrement" label="-" width="100%" click="index--" />
			<mx:Button id="buttonIncrement" label="+" width="100%" click="index++" />
		</mx:HBox>
		<mx:HBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
			<mx:Label id="myLabel" text="{index}"/>			
		</mx:HBox>
	</mx:VBox>
</mx:Application>

It’s the same code but I added the click action to the increment and decrement buttons. Now compile the new code and run the features again:

./build_test.sh
cucumber features

You shoiuld have the following output, with all the seven steps passed:

Feature: Counter
  In order to count something
  As a flex rock star
  I want to use my great flex app
 
  Scenario: Increment index            # features/counter.feature:6
    Given I open my flex app           # features/step_definitions/counter_steps.rb:1
    And I click the increment button   # features/step_definitions/counter_steps.rb:5
    Then the label text should be "1"  # features/step_definitions/counter_steps.rb:9
    When I click the decrement button  # features/step_definitions/counter_steps.rb:5
    Then the label text should be "0"  # features/step_definitions/counter_steps.rb:9
    When I click the decrement button  # features/step_definitions/counter_steps.rb:5
    Then the label text should be "-1" # features/step_definitions/counter_steps.rb:9
 
1 scenario (1 passed)
7 steps (7 passed)
0m9.781s

If you have any problems you may want to clear the cache from safari.

I used the funfx gem from rubyforge but it’s not up to date. If you want you can get the new code from github, it should have new features.

Filed under: Cucumber, Development, Flex, RIA, Ruby, Testing | 10 Comments »

10 Comments on “Flex functional testing with FunFx and Cucumber”

  1. Scotty Moon
    5:19 am on August 24th, 2009:

    Nice article. Not trying to be spammy, but I was on a rails rumble team doing a project planning app that actually creates your cucumber features and scenarios.

    http://scottymoon.com/post/170210887/lowdown-makes-cucumber-planning-easy

  2. Andrea Franz
    11:50 am on August 24th, 2009:

    Thank you Scotty! I tried lowdownapp, it’s a very nice tool!!

  3. Ahmed Nuaman
    2:33 pm on August 25th, 2009:

    Thank you so much for this! I’ve been looking at testing for flex and this seems perfect (since I’m working on RoR projects now)

  4. Weerasak.com » Article: Flex functional testing with FunFx and Cucumber
    10:24 am on August 31st, 2009:

    [...] Flex functional testing with FunFx and Cucumber by Andrea Franz Cucumber is a great tool I usually use for BDD in my ruby projects, but yesterday I tried it with Flex, and it was very enjoyable. Here a little example on how to test Flex applications with Cucumber. [...]

  5. tanakorn
    6:57 am on September 1st, 2009:

    I have a problem with your code.

    First of all in env.rb,

    in the line:

    @flex_app = @browser.flex_app(“CucumberExample”, “CucumberExample”)

    should move to follow this line:

    @browser.goto(“http://localhost:9852/CucumberExample.html”)

    and when I run your code it show error message:

    “And I click the increment button
    unknown property or method ‘fireFunFXEvent’
    HRESULT errlr code:0×0800220006
    Unknown name. (WIN32OLERuntimeError)
    ./features/support/env.rb:11:in ‘click_button’
    ./features/step_definitions/counter_step.rb:6:in”

    somthing like that.

    So how can I handle this error.

  6. Andrea Franz
    9:34 am on September 1st, 2009:

    I think you are on windows, aren’t you? I can’t try on windows, but take a look here:

    http://peternic.blogspot.com/2008/12/funfx-020.html

    http://groups.google.com/group/funfx/browse_thread/thread/f41b0e94bbb3daef

  7. Archana
    8:33 pm on September 1st, 2009:

    Try to add the test site in your IE trusted sites list under security tab. I had the same issue and adding the site to trusted site solved the problem.

  8. Marcio Giaxa Marinheiro » Blog Archive » Flex – Testes funcionais com FunFx e Cucumber
    12:49 pm on September 3rd, 2009:

    [...] Texto Original (Eu usei as mesmas configurações e deu tudo certo). [...]

  9. Faggot54
    11:57 pm on October 10th, 2009:

    The main reason is that they where not enslaved so they did not get the counter Bracha to have many children. ,

  10. Behavior Driven Development in Flex – Were we are? | Test And Try
    1:00 pm on January 11th, 2010:

    [...] Flex functional testing with Funfx and Cucumber [...]