Automated GUI Testing with yFiles FLEX
Tips & TricksSummary
Description
Introduction (why doesn't our testing framework recognize yFiles FLEX graph items?)
Usually, automated GUI testing frameworks and screen readers that can be used with Adobe Flex applications only recognize heavyweight Flex UI components. However, for performance reasons, most of the graph item visualizations in yFiles FLEX are implemented as lightweight display objects. Therefore, enabling yFiles FLEX graph items (nodes, edges, labels) for use with automated testing frameworks requires an additional effort. As an example, this article explains the necessary steps to enable automated testing for yFiles FLEX with the Selenium testing framework.
Although other automated testing frameworks will require different means of exposing the yFiles FLEX graph items, this example should help to get an impression of the necessary steps for enabling automated testing in yFiles FLEX applications.
Prerequisites
- In order to test Flex applications with the Selenium testing framework, we use the "Selenium Remote Control" (Selenium RC). The Selenium RC allows to use JUnit testing code to run automated GUI tests for applications that run in a browser.
- To use the Selenium RC with Flex applications, the flash-selenium extension is required. flash-selenium allows to communicate with the Flash Player from the JUnit testing code. flash-selenium uses the Flash ExternalInterface to communicate with Flash applications through JavaScript.
- Optional: the Selenium-Flex API provides a collection of functions that can be used to interact with the default Flex MXML UI components. The Selenium-Flex API is not required to access yFiles FLEX graph items from Selenium testing code, but it allows to access the default Flex components without implementing custom ActionScript functions for this purpose.
Exposing yFiles FLEX Graph Items to flash-selenium
With Selenium RC and flash-selenium, we will just have to provide custom ActionScript callbacks that allow to access yFiles FLEX graph items from JavaScript via the ExternalInterface. The ActionScript sources attached to this article demonstrate how this can be done in order to simulate mouse clicks on the yFiles FLEX canvas and retrieve the node id at certain coordinates.
For example, the function that simulates a mouse click on the yFiles FLEX canvas can be implemented like this:
public function flexCanvasClickAt( x:String, y:String ):String {
var canvas:GraphCanvasComponent = getCanvas();
if( null != canvas ) {
var xx:Number = Number( x );
var yy:Number = Number( y );
canvas.dispatchEvent( new MouseEvent( MouseEvent.MOUSE_DOWN, true, false, xx, yy ));
canvas.dispatchEvent( new MouseEvent( MouseEvent.MOUSE_UP, true, false, xx, yy ));
return "true";
}
return "false";
}
To allow this function to be called from JavaScript, it has to be registered with the Flex ExternalInternface:
ExternalInterface.addCallback("flexCanvasClickAt", flexCanvasClickAt );
With Selenium RC and flash-selenium, we can now use the function from the JUnit testing code:
assertEquals("true",flashApp.call("flexCanvasClickAt","100","100"));
The complete sources for the example tests can be downloaded in the resource section below.