Testing Flash & Flex Applications with Runtime Loader

Testing Flash & Flex Applications with Runtime Loader


SPEAKER: Hello, and welcome to
the video on how to test Flash and Flex applications using
the Runtime Loader. With TestComplete, you can
perform functional testing of Adobe Flex and Flash
applications. You can easily simulate user
actions on Flex and Flash movies, and even access their
internal objects, properties, and methods. Now, there are several
approaches to make these objects accessible. Each of them has their own
advantages and disadvantages. For example, if you use the Flex
Client Library, you’ll have to recompile your
Flex application. If you choose to use the Flash
Injector, then you need to use a debug version of the
Adobe Flash Player. In this video, I’m going to
show you the specifics of using the Runtime Loader option
for testing Flash and Flex applications. The Runtime loader is a helper
application that’s shipped along with TestComplete. It automatically embeds
TestComplete’s Flex testing library into a Flex application
at Runtime, thus making the application’s
internal objects, properties, and methods accessible to
the TestComplete engine. Now, this approach has some
advantages in comparison with the other approaches. First of all, the Runtime Loader
does not require a Flex application to be compiled
in any special way. Second, this approach provides
the best possible object identification by
TestComplete. And finally, it provides access
to native properties of application objects. Let me demonstrate how you can
test Flex applications by using the Runtime Loader. In my explanation, I’ll use a
sample Flex application that’s located on a local web server. In order to test a Flex
application with the Runtime Loader, you first need to copy
the Runtime Loader files to the computer where the tested
application resides. You can find the Runtime
Loader’s files here inside your TestComplete Install
Directory. Just look inside the
OpenApps/Flex/RuntimeLoader folder, and you’ll find these
three files here. Now the RuntimeLoader.html file
is a wrapper web page for the tested application that’s
going to be run by the loader. These other two modules that you
see are used for loading Flex applications. Now these are precompiled
with TestComplete’s Flex testing library. That way when you run your
Flex application with the Runtime Loader, it automatically
embeds TestComplete’s Flex Testing
Library into the tested application, thus making its
internals accessible to the test engine. This module is used for loading
Flex applications compiled for using only local
file system resources without network access, while this one
is used for loading Flex applications compiled for
using network resources. Now, since our application is
located on a local computer, we need to copy the loader’s
files to the local server, and it’s recommended that you store
these files in the same folder as where the tested application’s SWF file resides. So here, I’ve already got IIS
set up here, and here’s my virtual directory that
contains my SWF file. I’m going to just explore
that real quick. You can see here, here’s the SWF
file that we’re going to be testing, and you can see that
I’ve already copied in the Runtime Loader files into
the virtual directory that houses the SWF file. Now we can launch the Runtime
Loader application and run our Flex application. And to do that, I’m going to
open the Runtime Loader HTML file in a browser. So here I’ve loaded the Runtime
Loader page, and what I’m going to do is specify the
URL to the SWF file that’s going to be tested. Now, because the Runtime Loader
is living in the same folder as the SWF that we want
to test, I can just put in the SWF file’s name with the
extension, so I can just type in orders.swf here. Then I’m going to specify the
type of resources which the tested application can access. Depending on the selected
option, the Runtime Loader will use either the Runtime
Loader LWN SWF, or just the regular Runtime Loader SWF
module for loading the application that’ll be tested. Because our application was
compiled to use network resources, I’m going to make
sure that the Network option is selected, and then I’m going
to click the Load SWF File button. And now the Runtime Loader web
page will wrap the tested application’s SWF into a
container that’s precompiled with TestComplete’s
Flex library. After that, the tested
application automatically becomes open to TestComplete. That is, TestComplete will
now recognize the Flex application’s objects and be
able to access its internal properties and methods. So this application is now
ready for testing. So now to ensure that
TestComplete has access to the tested application’s objects,
I’m going to explore the application here inside
TestComplete’s Object Browser. So here’s the Internet Explorer
process that we’re working with, and this is the
page that corresponds to our Flex site, so I’m going to
expand this node right here. And inside this node, we can
see the Orders Object, and then here, we see the internal
objects of our Flex application. Any internal Flex object is
going to be marked with this FX glyph right here, so any
place you see FX, that means that that is a Flex object. So now take note of the object
hierarchy of the tested application. As you can see, TestComplete
ignores web objects that correspond to the Runtime
Loader’s Flex application, and the child’s SWF Loader
Control that actually loads that module. So the Object Browser Panel Tree
shows only the tree of the application loaded within
the Runtime Loader. We don’t actually see the
Runtime Loader modules themselves. And then over here in the Object
Properties on the right hand side of the screen, you can
see all the properties and methods of the selected
object. So the exposed Flex objects
contain methods and properties that are common for all tested
objects– the things like whether it’s enabled, if it
exists, if it’s visible, those kinds of things– but TestComplete also adds
this special Flex Object Property, which provides access
to all the underlying Flex objects and methods that
are available for that particular control. So we’ve demonstrated how you
can explore a Flex application in the Object Browser, and now
what we’re going to do is create a new TestComplete
project, define a tested Flex application, and record a test
against this application. So the first thing we’re going
to do is create a new project, and I’m just going to click this
Create New Project button right on the Start page here. And that brings up the Create
New Project wizard. So let’s go ahead, we’ll give a
more descriptive name to our project, I’ll call this the
Runtime Loader Project, and then we’ll click Next. Now we can define a tested
application, and first thing we need to do is to find that
application’s type. So since we’re testing a Flex
application, I’m going to choose Web. Now we need to specify the type
of web test that we’re going to perform. I’m going to select Functional
Testing of Web Pages. And this next page lets us
configure a list of web pages that will be tested
in our project. So to add our Flex application
to this list, what we need to do is click the Add button,
then we can specify a name that will be used to refer to
our Flex application, I’m just going to call it My Flex App. I can choose whichever browser
I want to do my testing with. In this case, I’m going to use
the 32-bit version of IE. And then I need to specify the
URL of the tested application. Because we’re using the Runtime
Loader, we need to specify the URL that links to
our application when it’s opened by the Runtime Loader. So the easiest way to get that
is to just come in here, and I’m going to copy the URL out
of that earlier browser window, and I’m going to paste
it inside this URL field. Last thing I want to do is make
sure this Auto Run check box is selected. That means that when we start
the recording process, TestComplete will automatically
invoke our browser out to that
target URL. So now we’ll click Next. I’m going to keep the default
settings inside the Test Visualizer. And on the last page of the
wizard, we can choose what scripting language will be used
in our project, I’m going to use JScript. And there we go, now our project
has been created. And you can see right here, our
Flex App has been added to the list of tested
applications. OK, so now I’m going to start
recording a test, so I’m going to click the Record New Test
button here on the toolbar. Once the recording process
starts, TestComplete automatically fires off my
browser and opens my Flex application in the
Runtime Loader. You can see right here, the URL
we specified contains the path to the Runtime Loader. So now I’m going to perform
some actions on my application. So let’s modify one of
our orders here. I’m going to select John Smith,
and then I’m going to click this Edit Order button,
and let’s make some modifications to this order. Let’s say that John Smith
actually wanted the screen saver product, and let’s say
that John Smith actually wanted 50 of those
items there. And you’ll notice that when
we add a value of 50, this Discount field has automatically
populated to a value of 10%. So we want to verify that that
discount field was populated successfully. So to do that, I’m going to
create a Property Checkpoint, and this brings up the Property
Checkpoint wizard. I’m going to drag this Finder
tool right over the Discount field there. You can see it’s got a red
highlight drawn around it, so I’m going to release
the mouse. TestComplete has selected the
object, we can see right here, I’m going to click Next. And now I can select the
property that I want to verify for that particular object. And to determine the text
displayed in the Total field, I’m going to use the public
property of the underlying Flex control. And because the application is
compiled with the Flex Client Library, we can access all the
native properties of the objects in this application. So first thing you want to do is
make sure that the Advanced View Mode is selected, and then
scroll down until you find the Flex Object property. Click the ellipses here, and
then I’m going to scroll through this list of properties
until I find the Text property. There it is, 10%. So I’ve got that selected,
and I’ll click Next. This final screen is just
a summary of what the checkpoint’s going to do, so now
I’m going to click Finish. We see that TestComplete throws
a message up here saying that a checkpoint
has been created and added to our test. So now I’m going to close out of
the Edit Order dialog, then I’m going to close the
browser down, and finally, we’ll stop recording. Now TestComplete’s going to
take a few moments and generate the commands. Here they are. And as you can see, TestComplete
successfully recognized all the controls
inside our application, and so what we can do now is run this
test to make sure that it’s played back successfully. So I’m just going to click
on this Run Test button. OK, so I fast forwarded a bit. You can see that after the test
is over, TestComplete is displaying the test results in
the Test Log Panel, which you see right here on the right
portion of my screen. This panel provides us with
detailed information about all the actions that
were simulated. For example, this first message
here is telling us that the application was
successfully launched. This message right here says
that we clicked on John Smith. You also see that we’ve got
images that are being logged here, both what look like at
record time and at playback time, so we know exactly what
transpired during the course of the test run. And then you can see here that
the Log Items Panel is telling us the test ran successfully,
as denoted by the green check mark. And this Information Panel down
here gives us some more information like the total
number of errors and warnings that were encountered. In this case, both of those
are equal to zero, so this test passed.

Leave a Reply

Your email address will not be published. Required fields are marked *