NICK OLIVO: Hello, and welcome to the video on how to test
Flex Applications by using the Flash Injector Helper Module.
With TestComplete, you can perform functional testing of
Adobe Flash and Flex web applications.
You can easily simulate user actions on Flex and Flash
movies, and even access their internal objects, methods, and
properties.
There are several approaches to make these objects
accessible to TestComplete.
Each of them has advantages and disadvantages.
For example, if you decide to use the Flex Client Library,
you'll have to recompile your Flex application.
Or, if you choose the Runtime Loader option, you'll need to
copy some special files to the tested web server.
In this video, I'm going to show you the specifics of
using the Flash Injector Module to make Flash
applications testable.
Flash Injector is a helper SWF movie that's shipped along
with TestComplete, and is intended for automating
testing of Flex and Flash applications.
Flash Injector automatically makes Flash applications
testable at runtime without any need to prepare them in
advance for testing.
You just need to use the debug version of the Adobe Flash
Player, and configure it in a special way for pre-loading
the Flash Injector SWF file when running any Flash
applications.
TestComplete will then treat Flex and Flash applications
running within that Flash Player as an open application.
That is, the test engine will be able to access native
properties and methods of the Flash movie.
Using the Flash Injector SWF Module is especially useful
when you're going to test a number of Flex and Flash
applications, and you only want to configure your testing
environment once.
So let me demonstrate how you can test Flex applications
using the Flash Injector.
And in my example, I'm going to use a Flex Orders
application that's located on my local web server.
So here's the Flex Application that we're going to be testing
with today, and now I'd like to walk you through the
process of how to configure TestComplete so that we can
record tests against this application.
In order to test a Flex application via the Flash
Injector, you first need to install a debug version of the
Adobe Flash Player into your browser.
So you go out here to this URL, and you're going to want
to notice that there are several versions of the
plug-in that are intended for different browsers.
You can see them all listed down here.
So for example, if you're looking to test IE, then you
want this version of the debug Flash Player right here.
Now, I've already installed the necessary debug Flash
Player for my browser, so the next thing that I'm going to
do is edit a special file that should get installed along
with the debug version of the Flash Player.
Now, this file may not have actually been created by the
Flash Player, so you're going to need to check to see if it
exists first, and if it doesn't, then it's really easy
to create it.
So here's what we're going to do.
I'm going to jump over to my User Directory, and on my
Windows operating system, it's at C, Users, and then my user
name, which is Nick Olivo.
On your system, it will be, obviously, your user name.
If you're running Windows XP, then this file is going to be
in the Documents and Settings, Username Directory.
So the file you're looking for is this guy right here,
MM.CFG, so you may just need to create this text file
here-- that's all it is, is flat file under the hood-- and
then open that file up.
And you're going to want to fill in this value here.
What you're looking at here is the fully qualified path to
the Flash Injector SWF file that's included with
TestComplete.
In my system, it's stored here at C Program Files X86, and
then in my TestComplete directory.
You save that file.
And then once you've done the MM.CFG file, the last thing
that you need to do is add the folder where the Flash
Injector SWF file lives to the list of trusted locations in
your Flash Player settings.
So now what you want to do is open your browser and go over
to the Global Security Settings page of the Flash
Player Settings Manager, and you can find that by going to
this URL right here, it's Macromedia.com/s
upport/documenta tion/en/flashpla
yer/help/settings_manager04.
So just go there, and what you want to do is come down here
in this little panel, and you're going to want to say
Edit Locations, Add Location.
And then you just browse for a folder, and you're going to
want to go to your Program Files Directory, wherever your
TestComplete install lives.
So in my case, Program Files X86, Automated QA,
TestComplete 8, Open Apps, Flex, and say OK.
And then that will add that location to your list of
trusted locations, and then TestComplete will be able to
test the Flash applications.
When I open the Tested Flex application in my browser, the
Adobe Flash Player will pre-load the Flash Injector
SWF module, and then load my web page.
As a result, the tested application automatically
becomes open to TestComplete.
That is, TestComplete will be able to recognize all the
internal objects and properties within my Flex
application.
Now, to ensure that you're actually seeing all those
internal properties and methods, what we're going to
do is bring up TestComplete, and I'm going to go over to
the Object Browser page, and here's my Internet Explorer
process, and if you expand the Orders SWF file, you can see
right here these are all the internals of my Flex
application.
So the Page Object here, that actually corresponds to the
application's wrapper page, and then this object
designates the tested application's main window, and
then these objects in here, these are the actual windows
and controls inside my Flex application.
Now over here on the right hand side of the screen, you
can see the Properties and Methods of a selected object
inside the Object Tree, and the exposed objects contain
methods and properties common for all
tested objects and methods.
Additionally, TestComplete adds this Flex Object
property, and this property provides access to the
underlying Flex Object and its public properties, as you can
see right here.
So we've demonstrated how you can explore a Flex application
in the Object Browser, and now I'm going to show you how to
create a new TestComplete project, define a Flex
application for testing, and then how to record tests
against this application.
So to create a new project, I'm going to click this Create
New Project button, and that's going to bring up the Create
New Project wizard.
I'm just going to call this Flash Injector Test, and I'll
click Next.
And now we can define a tested application, and the first
thing we need to do is specify the application type.
As we're going to test a Flex application, I'm going to
choose web, and now we need to specify what type of web test
we're going to perform.
In this case, it's going to be Functional
Testing of Web Pages.
Now this next page lets us configure a list of tested
applications that we're going to use in our test project.
And so I'm going to add the Flex App that we
want to test here.
To do that, I'm going to click the Add button.
You can see that adds a new line to this element here, and
I'm going to specify a name that will be used to address
my website in my testing here.
In this case, I'm going to call it my Flex App.
I can specify which browser I want to use in my testing, in
this case, I want to use the 32-bit version of IE.
And then finally, I can fill in the URL that points to my
SWF file, so I'm going to say http://localhost
/flashorders/orders.swf.
And last thing I'm going to do here is make sure this Auto
Run box is selected.
What that means is when we begin recording our tests,
TestComplete will automatically invoke the
specified browser to that website.
OK, so now I'm going to click Next.
I'm going to keep the Default settings for my visualizer,
and click Next.
And I'm going to use JScript as my scripting language of
choice here.
OK, so now you can see TestComplete has automatically
created a new project for us, and it's added our web page to
our list of tested applications.
So now I'm going to record a test, so I'll just click the
Record New Test button here on the toolbar.
And once the recording begins, TestComplete automatically
invokes my browser and takes me out to my target website.
Now I'm going to perform some actions in my application, so
let's edit the first order here in our grid.
So I'm just going to select that row, and then I'll click
the Edit Order button.
And let's make some modifications here.
Let's say John Smith really wanted the Family Album
product, and he's got a MasterCard instead of a Visa.
And you know what, this is actually John Smith Senior,
not John Smith Jr.
Now we'll click OK and exit the application.
I'm just going to close the app down.
And then we'll stop recording.
OK, now you can see TestComplete has generated
some test commands here, and it's recognized all the
internal objects inside our application here.
So now what we're going to do is we'll replay the test and
make sure that TestComplete replays that same sequence of
actions that we've just recorded.
So I'm just going to click the Run Test button.
OK, I've fast forwarded a bit, you can see TestComplete has
finished the test, and we can see the results
here in the Log panel.
This panel gives us detailed information about the actions
that the test simulated.
For instance, this image right here tells us that we chose a
Family Album from the Combo Box, and you can see here,
we've got pictures of both what the application looked
like both at record time, and at runtime, so you can easily
see if the application's state and behavior differ from what
we had during the recording.
And then the Log Items panel right here tells us that the
test ran successfully, and we've got a little information
section down here that tells us we encountered zero errors
and zero warnings during the course of the run.
OK, so now let's modify our test a little bit.
As you've seen, to modify a certain order, we need to open
the Edit Order dialog.
Now TestComplete automatically does that for us during our
test run, but it's possible that TestComplete may not be
able to open that dialog due to some reason.
Maybe there's a problem on the site, we have a 404,
something like that.
In that case, an error will occur and the
test will fail out.
So to control whether this dialog is open during the
test, I'm going to create a Property checkpoint.
Now to do this, I need to run my application in order for
TestComplete to be able to access the desired objects.
So I'm just going to right click on my Flex App
here and click Run.
OK, once my page is back up, I'm going to bring back the
Edit Order dialog, and now I can put the Property
checkpoint into the test.
So I'm going to go back into TestComplete here, we're going
to go into our test case, and I'm going to go into the
Checkpoint section, here I'm going to grab this Property
Checkpoint action right here, and I'm going to drag that
onto my test right where we click the Edit Order button.
So we put the checkpoint right here.
Now the Property Checkpoint wizard appears, and this
wizard's going to help us create a Property checkpoint.
So the first thing I'm going to do is select the object
whose properties I want to verify.
So using this Finder tool, I'm going to select the Edit Order
dialog, so I'm just going to drag this right over the Edit
Order box, and you'll see a red highlight is
drawn around that box.
OK, so I'm going to release the mouse now, and
TestComplete will capture a reference to that Edit Order
dialog, here it is, and now I'm going to click Next.
Now I can select the property that I'm interested in.
To verify whether the dialog is visible, I can use the
Visible property right here, or I can use the Public
property of the underlying Flex Control.
Since we're using the Flash Injector module to test our
Flex application, we have access to all the native
properties and methods via that
special Flex Object property.
And to make that property visible, I'm going to click
this Advanced View link right here, and then I'm going to
scroll down to the Flex Object.
I'm going to click this Ellipses button right here,
and I'm going to look for the Visible Property inside here.
There it is, and then I'll click Next.
This final screen is just a summary of what the
checkpoint's going to do, so I'm going to click Finish.
All right, so now our checkpoint's been added to the
test, and now we're going to add a few additional
operations into our test case here.
These operations will look to see if the checkpoint passed,
and if it did, the test will continue, and if it didn't,
the test will fail out and will post an Error message out
to the log.
So to do that, I'm just going to come onto the Statements
palette here, I'm going to put an If statement right after
the Property checkpoint.
What I'm going to say here is if the last operation in this
case, if the checkpoint, equals true-- and true just
means that it passed--
so if that checkpoint passed, then we're going to perform
these actions here inside our application.
Otherwise, we'll use an else statement, we'll pull that on
at the end here--
if that checkpoint didn't pass, then we'll log an error
message out to the log.
And we'll put that right here, and we'll log an error saying
that the Edit Order dialog did not appear.
OK, so now we can run this test.
I fast forwarded a bit, now you can see
the test run is over.
TestComplete's displaying the log file.
You can see right here that we have our checkpoint telling us
that the dialog did appear, and so the test has passed.
This concludes our video.
You've seen how to make Flex applications testable by using
the Flash Injector movie, how to record a test against such
applications, and how to access the native properties
of Flex Application objects.
To learn more about other approaches to make Flex
applications accessible to TestComplete, please visit
SmartBear.com and check out our other video library.
Thank you for watching, and have a great day.