SeleniumRC -Flex/Flash Automation

SeleniumRC -Flex/Flash Automation

Automation of flex is very challenging when compared with normal HTML. As per my understanding no automation tool can recognize the flex objects directly without compiling the flex source code with additional libraries.

All the HTML objects are visible under page DOM, but the flex objects are not visible. Flex is displayed on the page by embedding .swf file in the HTML. As .swf file is proprietary to Adobe and having their own standards and design, object methods are not visible and understood outside. To expose the objects, we need to recompile the flex with some third party libraries.

Points to be considered while selecting third party OR open source libraries.
1. There should be slight increase of .swf file size (or Total Page Size) after the compilation with the additional libraries. This will impact the application performance when multiple users are accessing the page.
2. It should allow to test Flex and Html simultaneously.
3. It should not break the existing functionality and allow us to test in production and test environment.
4. Ability to expose all the flex objects (like Grid...)
5. Easy to code and identify the objects, instead of writing lengthy statements.

Some of the flex libraries for selenium are
1. flash-selenium
2. flexmonkium
3. flex-pilot

I have spent time on above said libraries and felt Flex-pilot is suitable to me. It has bootstrapeer to make application testable and use chains to identify the objects, similar to xpath.

Implementing Flex-pilot on your application, select this Link.
Make sure you don't have any compilation errors and deploy it on test environment.

Test whether flex-pilot bindings are created properly.
1. By using Sauce IDE. Download from this Link. (Firefox add-on)
2. By using firebug

Sauce IDE
Download and install as Firefox add-on. This is similar to Selenium IDE with additional Flex capabilities. It has got "FlexExplorer" that can locate the Flex object chains (xpath for flex-pilot). Open the application and navigate to flex component page, open the Sauce IDE, select the "FlexExplorer" button and locate any flex object, you should be seeing its chain. It is similar to GUI spy in QTP.
Attaching the screen shot for more clarity.

If it find Target value, then that is the main handle. Attaching the screen shot for more clarity.

Firebug
Best way to test your Flex code is by using the Firebug. Flex pilot bindings expose the flex objects methods in the page dom, so by using JavaScript you can simulate the changes on the flex screen without running the code through selenium.
From the above screen you can notice that "GepCatalog" is the main handle for the entire flex object. Type the following code in the firebug console and run it, if it says "Function" every thing is configured perfectly.
Attaching the screen shot for more clarity.

Following are the available API's, select this link.

You can get the object ids from the Flex explorer or flex developer can provide the ids for the objects you are planning to interact. Before moving to selenium, run the DOM script and make sure all the objects are identifiable. Attaching the screen shot for more clarity.

I hope you are comfortable identifying the flex objects, lets move to selenium.
You can run the same above methods in selenium in the following way.

s.runScript("document.getElementById('GepCatalog').fp_type({name:'txtSearch', text:'laptop'})");
s.runScript("document.getElementById('GepCatalog').fp_click({name:'goBtn'})");

If you want to run by using selenium directly without using page DOM.
Download "DefaultSelenium.Java" from the from this link, implementation of Selenium interface with additional flex methods.
Download "UserExtension.js" from this Link and run the selenium jar using this extension. For more details read this Post.
There will be slight change in the code, Selenium code looks like this.

private Selenium s = new ds( "localhost",4444,"*iexplore",BASE_URL);
---
((ds)s).flexType("id=GepCatalog", "text=laptop,chain=name:txtSearch");
((ds)s).flexClick("id=GepCatalog", "chain=name:goBtn");

Note: ds - DefaultSelenium.Java

Thanks a lot for Flex-Pilot contributors.
Enjoy Flex, Happy Testing!
---