CloudTest®

 WebUI  Tes0ng  Tutorial

SOASTA CloudTest® WebUI Testing Tutorial
©2014, SOASTA, Inc. All rights reserved.
The names of actual companies and products mentioned herein may be the trademarks
of their respective companies.
This document is for informational purposes only. SOASTA makes no warranties, express
or implied, as to the information contained within this document

Table of Contents
Why Web UI/Ajax Testing? ...............................................................................................1
Prerequisites ...............................................................................................................................1
Browser Recorder Firefox Add-On ...........................................................................................1
SOASTA Conductor Prerequisites ...........................................................................................2
KnowledgeBase and Tutorials ..................................................................................................2
Using the SOASTA Store .........................................................................................................3
Testing Your WebUI / Ajax Site .........................................................................................4
Introduction to WebUI / Ajax Tests ...........................................................................................4
Recording Browser User Scenarios ................................................................................6
Recording a WebUI / Ajax Test Clip .........................................................................................6
Inspecting the Newly Created Clip ........................................................................................14
Browser Action Elements and Properties ..............................................................................15
Adding a Text Output .............................................................................................................18
Adding a Screenshot Output ..................................................................................................19
Adding an Interval Delay between Each Browser Action .......................................................20
Playing a Simple WebUI / Ajax Test ........................................................................................22
Result Details .........................................................................................................................23
Inspecting Clip Element Outputs ...........................................................................................24
Advanced Clip Editing ....................................................................................................26
Adding a Validation on Body Text ..........................................................................................26
Adding a Validation on an Element ........................................................................................27
Analyzing Results ...........................................................................................................30
Other Widgets Useful to WebUI / Ajax Tests .........................................................................34

i

Why Web UI/Ajax Testing?
After many years of trials and standards development, Rich Internet Applications (RIAs)
based on Asynchronous JavaScript and XML (Ajax) are appearing everywhere. These
Ajax-based user interfaces (UIs) combine rich graphics, Browser Actions, and dynamic
content using messaging events to deliver an application across the Web that combines
the best of the Web and the desktop.
End users receive a richer end user experience while IT organizations receive the ability
to support a single application image from the server. Leading software application
vendors are moving rapidly to deliver new versions of their products to enable this
approach. Customer-facing self-service applications seem to be the market force
pushing these new applications forward. Companies save money because customers
easily support themselves and are much happier with the service they do receive . . . as
long as the applications work and perform.

Prerequisites
Browser recording requires that both the Firefox Browser and the SOASTA Browser
Recorder add-on (for Firefox) be installed on the machine where recording will take
place.
Browser Recorder Firefox Add-On
The SOASTA Browser Recorder is a Firefox Add-On that can be downloaded from
SOASTA CloudTest’s Central tab, Welcome page, Downloads section.

• See Installing the Browser Recorder Extension for additional steps.

1
SOASTA Conductor Prerequisites
While not required for browser recording, the SOASTA Conductor drives the playback of
WebUI / Ajax tests and must be installed before WebUI test playback. Both installs are
available on the Welcome page in the Downloads area.
Additional SOASTA Conductor configuration instructions can be accessed in the
KnowledgeBase > Installing SOASTA Conductor topic.

Launch your SOASTA Conductor and then access Preferences from its menu.
In SOASTA Conductor, Preferences, ensure that both Allow WebUI/Ajax testing (on by
default) and Multi-window Ajax support are checked.

KnowledgeBase and Tutorials

2
CloudTest provides two types of recording in support of test creation. This tutorial covers
Browser Recording, which allows the user to capture user interface actions performed
on a given target web site. CloudTest also provides HTTP(S) recording.
o Refer to the Load Testing Tutorial and to the CloudLink, Knowledge Base’s
HTTP(S) Recording section for additional HTTP(S) recording instructions.
o Refer to the KnowledgeBase > Browser Recording section for additional Browser
Recording instructions.
Using the SOASTA Store
This tutorial uses the sample site, SOASTA Store, which is provided as a practice site for
SOASTA tutorials.
The SOASTA Store provides some of the most common eCommerce browser actions
and user interface features. Keep in mind, it is not necessary to enter real or even
complete information since the site is only for practice.

3
Testing Your WebUI / Ajax Site
The SOASTA Browser Recorder Add-on for Firefox automates the creation of real world
Web UI/Ajax test cases by recording Browser Actions from the target Web application.
This allows the basics of a Web UI/Ajax test to be created very quickly. The test designer
does not need to convert to another format — the test creation process is done in place.
This Tutorial presents procedures for the following essential WebUI / Ajax test methods:
• Introduction to WebUI / Ajax Tests
• Recording Browser User Scenarios
• Creating a WebUI / Ajax Test
• Composing a WebUI / Ajax Test
• Running and Monitoring a WebUI / Ajax Test
• Analyzing Results

Introduction to WebUI / Ajax Tests

Browser Recording is performed in the Clip Editor. While recording, each Browser Action
is captured (for example, Click, Type, Drag and Drop, etc.) and automatically added to
the test clip that is being created.
Typically, a single test clip defines a test case. You can also output page elements to
properties for use as parameters in subsequent testing steps, or to the SOASTA
CloudTest Results Viewer for help in debugging a test.
As a general guideline, your test should account for all the factors of the application(s) in
the environment in which they occur, and include one, or, as many viable test cases as it
will take to arrive at a good test composition. In the context of WebUI / Ajax testing,
planning will also take into account the following factors:
• The types of actions users take within the browser
The test designer will consider the types of user interactions and user flow that make up
the best test. Once a test flow is determined for a given UI it can be easily captured. The
test designer can move quickly from Browser Recording to defining validations and other
test details for those captured Browser Actions.

4
• The timing of user actions
Web UI/Ajax testing presents a special timing challenge because the HTML page is
modified asynchronously. This lack of determinism is handled for the tester in SOASTA
CloudTest using a comprehensive set of waitFor commands. WaitForElementText,
waitForElementPresent, waitForJavascriptCondition and waitForElementVisible are some
examples. SOASTA CloudTest’s wait commands allow the tester to gain control of test
timing targeting a complex Ajax Web application.
• The validation of tests
Verifying the behavior of a Web UI/Ajax application is an exercise that requires a great
deal of detailed validations. After each Browser Action is recorded, the test designer can
add as many validations as needed to each Browser Action by picking from a
comprehensive list of built-in Verify commands. These Verify commands are specific to
validating web pages (for example, verifyAttributeValue, verifyElementText,
verifyJavascriptCondition, verifyElementPresent, verifyTextPresent, etc.). SOASTA’s
approach allows deep extensive validations to be built easily and quickly.
SOASTA test clips can combine a mix of Browser Actions and HTTP(s) messages. This
capability supports the use of Web service calls to obtain data values and to validate the
end result of a test. As an example, the test of a Web UI component called Add
Customer can use this feature to validate that the database contains the correct values
after an update has occurred.
• The number of users and their locations
Complex test suites can be easily built based on your test cases. Using SOASTA
Conductor, WebUI / Ajax tests can then be run in many instances of multiple browsers
(Firefox, Internet Explorer, Safari) on any of the major OS platforms (Windows, Linux, and
Mac OS X). A single test can use multiple Conductors and those Conductors can be
installed on computers distributed across the Internet. Each Conductor can run multiple
browser sessions simultaneously.

5
Recording Browser User Scenarios
With the Browser Recorder successfully installed and the WebUI / Ajax target created in
the prior steps, we will now use the Browser Recorder add-on to create a new test clip
using that WebUI / Ajax target. The following steps must be performed using the Firefox
browser.
When in Firefox, if the necessary Browser Recorder extension has yet to be installed, an
additional drop-down command appears.

If necessary, choose the Download the Record Browser extension command to install
the extension and then restart Firefox before proceeding.

Recording a WebUI / Ajax Test Clip

The Clip Editor provides the ability to record browser actions inline. Target creation
occurs on-the-fly, the underlying targets are accessible when creating or modifying
system or custom properties.
1. Click Central > Clips selected, click New to launch the Clip Editor.

A new Untitled Test Clip opens.

6
 2. Click the Record button and then select Record Browser.

The Enter Starting URL for recording box appears for you to enter the target URL.

If the URL entered is already in a target, then that target is used. Otherwise, a new
WebUI target is created.
Note: The shot below shows the Clip Editor in List view. Refer to List View
Mode to learn how to switch between view modes.

3. Click Record to proceed with your recording in a new window.

7
 When you do so, the target URL opens in a new Firefox window and the Clip Editor,
Record button indicates recording is underway (both shown below).

8
 4. Now that we’ve got the target site up in its own window, we’re ready to record.
Click the Store link in the top toolbar of the store site. If necessary, use your
mouse to arrange the CloudTest and the target site windows so you can see them
both.

The actions added to the clip wil vary according to your actions. For example,
depending on how you handle a mouse, you may get a mouseOver browser
action in your clip prior to the click(s). The clip will also vary around user choices
such as whether to access an object using the keyboard or mouse.

5. Click three or more of the Add to Cart buttons on the Store page. Additional click
actions are added to the workspace.

9
 6. In the Store page, scroll up to the e-Commerce section, which shows the
Shopping Cart’s contents and then click one of the blue links to view a product
detail page for one of your selected items.

7. Click the product photograph to view it in a popup window and then close it.
8. With the product detail page still showing, enter Search text in the provided entry
field and then click (or key press) the Search button. For example, in our clip we
entered an item’s title: “Jefferson Key”. Note the search result text for this action
as we’ll use the word spellbinding later to validate text in the test.

9. Return to the top menu and click Checkout.

10
 The Checkout page appears. This page has a lot of useful buttons and entry fields.
Keep in mind, the information you enter here is practice only and is not actually used
to purchase products.
10. Scroll to the heading “Please review your order” and change one or more values.
• Click Update for each numeric change that you make.

• Click Remove for any one of the items in your Shopping Cart. If an item you
added gets the message "cannot ship to…" then remove it before proceeding.

11. Scroll down and fill out all of the information in the Join up now section.

11
 Note: Since this exercise is solely to illustrate some of the UI features of a
typical eCommerce site, it is NOT necessary to actually complete a
purchase or to enter any true information. Any errors that occur
because of incomplete information can be safely ignored in this
context or you can continue on until a successful transaction is
complete.
12. Fill out the Your billing/contact details section.

13. Click the Purchase button to complete the transaction.

The Transaction Results page shown above corresponded to Browser Action25 in our
example clip.
14. In the Clip Editor, click Record a second time icon to stop the recording.

12
 15. Click Save on the Clip Editor toolbar.
The Save Test Clip box appears.
16. Enter a name for the test clip (or accept the default one) and then click OK.

The newly created clip is shown in Icon view below.

The captured Browser Actions are the result of the user actions you performed during
recording. Your specific recording will vary slightly in appearance, depending on the
actions taken to complete the above steps.

13
Inspecting the Newly Created Clip
Before proceeding with test creation, switch to List view to inspect the newly created
test clip. List view provides visual access to more clip element details by presenting
them in a tabular list.
1. Click the drop down Icon/List button on the toolbar and then select List.

The List view is probably the most useful view of a test during the editing process
because it shows Parameters (6th column right).

14
Browser Action Elements and Properties
Browser action details can be viewed either by clicking the Gear icon on the browser
name to show the Info Window or by double-clicking to open an action in the lower
panel Action Editor. When the Info Window is open the lower panel is minimized, and
when the Action Editor is open, the Info Window goes away.
• Whether in Icon or List view, you can examine elements and properties for any
Browser Action by selecting clicking its Gear icon. When you do so, the Info
Window tab displays selection details.

• You can also examine elements and properties for any Browser Action by
selecting it in the workspace above and then double-clicking it. When you do so,
the <Selected: Browser Action> tab displays the contents of the selection in its
own pane.

The Info Window and Action Editor nodes are: General (top-node above), Inputs, Waits,
Outputs, Validations, and Property Sets. While the Selected: Browser Action tab active,
the browser action-level nodes are shown in the tree on the left.

15
 • Other settings, including Waits, Inputs, Outputs, Validations, and Property Sets
can be set by clicking the respective node and then performing the desired action
on the right.
Examine and edit Browser Action properties for any given selection:
1. In the Selected: Browser Action 12 tab, familiarize yourself with the available
Browser Action elements and properties.

• General (including Repeat and Custom Properties tabs in the lower

panel only)
Inputs (Locator, Coordinate String)

Locators are unique characteristics that identify a specific element or

object on a web page. Locators come in many forms, including links,
IDs such as those defined within CSS, and XPath expressions.
For example, a locator can be captured as a Document Object Model
(DOM) location such as in an XPath statement, or by its use of HTML
elements, CSS classes, or JavaScript.

• Waits (Pre-Action Waits , Post-Action Waits )

Waits are commands that tell SOASTA Conductor not to execute a Browser
Action until a condition is met (pre-action waits), or to not continue
processing the outputs, validations and property sets of the Browser Action
until a condition is met (post-action waits).

16
 • Outputs
Outputs specify what is to be shown in the Result Viewer for a given
Browser Action. Typical outputs include “captureScreenshot”,
“outputElementText”, and “outputInnerHTML”. A single Browser Action can
have an unlimited number of outputs.
• Validations

Validations determine whether a Browser Action succeeded or failed.

Browser action validations range from simple true/false conditions such as
“verifyAlertNotPresent,” which verifies that the Browser Action did not
cause an alert to appear; to more complex conditions such as
“verifyTableCellText,” which verifies that a particular cell in a given table on
the page contains the specified text. A single Browser Action can have an
unlimited number of validations. Any validation failures will be exposed in
the Results Dashboard.
• Property Sets

Property Sets give you the ability to take text or data from the Web page
you are testing and store it in a custom property for use in a subsequent
Browser Action or message.
SOASTA CloudTest includes three property sets, all of which have
relevance for refining and editing a selected Browser Action.
o Custom Properties
Custom Properties are user-defined properties that are available to all
clip elements, including Browser Actions. Custom properties can be
thought of as backdoors that allow access to portions of the object
model more easily. For example, you can capture a sessionID using a
custom property that can be passed to a global property and used
across tests.
o System Properties
System Properties are available to all clip elements, including Browser
Actions. SOASTA CloudTest defines system properties. For example, a
Browser Action target has system properties for browser driving; while a
test clip has system properties such as name, repeat timing, label, and
more.
o Global Properties
Global properties are defined within the Central > Global Properties List
and are “global” within the entire SOASTA CloudTest environment—and
can be used across compositions.

17
 TIP: Refer to Property Sets in a Browser or App Action for more
information on property sets.
Adding a Text Output
In the following steps, we will add an output to each of the browser actions in our clip
that correspond to the Add Cart buttons we clicked above. This output will capture the
body text of the page so we can find interesting things to validate.
Typically, in the early stages of test building an output is used for informational purposes.
However, the content of outputs can also be stored and used in a custom property set
for later use.
1. In the Clip Editor list view, identify the Add Cart buttons by their locators, which
include the product_xxx_submit_button format (shown below in Browser Actions
5-8.

2. Click the Left Arrow in the Info Window to return to the type action identified
above.
3. Click the Output tab.

4. Click the green Plus icon. A new output is added to the Outputs list.
5. Click the Command list drop-down, and then scroll and select outputBodyText.

18
 Each page in the sequence included some text about the shopping cart’s contents,
starting with “Your shopping cart is empty” and then “You just added “The Sixth
Man” to your shopping cart,” and so forth. While we don’t really need the output on
the browser action if we already know what to validate—adding key outputs can
serve as a helpful primer for a page or any of its elements that have text we’d like
to validate.
Adding a Screenshot Output
We can also use the captureScreenshot output for helpful reminders of which action
corresponds to which page or object on a page. In the steps below, we’ll get a screnshot
of the last action in our test clip to find something on it to validate.
1. In the Clip Editor list view, locate the final browser action in your clip and open its
Info Window.

In our example clip, the final page is the transaction page and corresponds to
Browser Action25.
2. Click the Output tab.
3. Click the green Plus icon. A new output is added to the Outputs list.

19
 4. Click the Command list drop-down, and then scroll to select captureScreenshot.

5. Click Save on the Clip Editor toolbar.

Adding an Interval Delay between Each Browser Action

In the following steps, we will add a delay to the test clip for use when debugging the
test. This type of delay may not be useful when running automated tests, such as those
tests that are part of nightly builds; however, it can be useful to impose some delays to
make the test viewable during the test editing phase.
1. Click the Properties tab in the sub-pane and then select the Clip tab at the top
of the pane (the Clip tab may already be visible if properties are already open
from the prior exercise).
2. In the Property Type list, click Clip Properties.

20
 3. In the Clip Properties area on the right, enter an Interval Delay in the given field.
For example, 2000 ms. Entering 2000 adds a two second gap between each
action in the given test clip.

4. Click Save on the Clip Editor toolbar.

21
Playing a Simple WebUI / Ajax Test
Now that we’ve added a few outputs to the browser actions in the Clip Editor, we are
ready to play this in a test composition and get a better idea what we have to validate.
You can start your desktop client Conductor before or during the steps below.
1. Start the Conductor that you used to record this clip. Since we just recorded this
clip we know which Conductor to start.

Note: If your SOASTA Conductor is not started when you click Play (or
select the Play in Test Composition command), you will be prompted
at that time to start it. The Warning box that appears names the
Conductor to start. Click Continue once you have started the named
Conductor on your desktop client.
2. To play this clip in a new WebUI / Ajax test composition, click the Use in
Composition drop-down and then select Play in Test Composition.

When you do so, the Composition Editor appears with a draft test composition and
begins to play in the Composition Editor, Play tab, which displays the default Result
Details dashboard.
Note: Since the SOASTA Store is only for practice use, don't become overly
attached to getting no errors in this example scenario. If you
experienced a Registration/Login error on playback and you're not in
a SOASTA class where the Admin can reset your login for you, simply
ignore the error.
In some cases, Firefox users report issues with the Checkout link, in
which case ensure that Multi-window Ajax support is checked in your
Conductor's Preferences.

22
Result Details
The Results Details chart is the first place test results are presented, including in this
case its outputs, and whether or not the test composition passed or failed.

Result Details uses a Cover Flow to display the test composition’s message stream, as
well as a Navigation Tree. Items stream into both unless something is clicked. Once
you’ve clicked an element of the test—you can click Jump to now to return to stream
mode.
o Click any object in the Cover Flow at the top to center it and display its details
and play statistics in the panes below.
o Use the scrollbar to browse the flow. Select any item to show its low-level details.
However, we can easily specify a different Conductor at any time by editing the
target’s Conductor setting (preferably before we click Play).
To open the target from within the Clip Editor, click the Messages/Actions tab in the
lower panel, and then double-click the Included Target in the Included Targets list. You
can also locate the target by name in the Central > Targets list, of course.

23
Inspecting Clip Element Outputs
In the basic edits above we added text outputs for each of the Add Cart clicks as well as
a screenshot output for the last browser action in the test clip. Now, let’s use the
following steps to inspect those outputs in this result.
1. In the Navigation Tree (on the left), select Browser Action 5.
2. Click the Maximize icon on the Outputs section.

Note the text, “Your shopping cart is empty.”

3. Do the same for Browser Action6 (and repeat for each of the other actions to
which you added a body text output). Note that Browser Action6’s
bodyTextOutput includes the text, “You just added "The Sixth Man" to your cart.”

24
 TIP: In our example clip, the remaining body text outputs are: “You just
added "Vegas Moon" to your cart, “You just added "Jefferson Key" to
your cart,” and finally, “You just added "Buried Prey" to your cart.”
4. Do the same for Browser Action25 (or whatever your last action is named).

5. Click the screenshot to pop it to full size. In the screenshot above, we noted
that the final in the Total field was $58.95.

25
Advanced Clip Editing
In the advanced steps below, we’ll use the information we learned from the outputs of
the first play of our new test to add some validations.

Adding a Validation on Body Text

In the following steps, we will add a validation on the body text we learned about from
the output above. For each browser action that corresponds to an Add Cart click in the
test clip above, we will .
1. Open Browser Action5 in the Info Window and then click the Validations tab.

2. Click the green Plus sign.

A new validation form is added to the Info Window.

26
 3. In the Command list, click the drop-down and select verifyBodyText. This
Command verifies the specified text is on the rendered page.

4. In the pattern field, select Glob and enter *Your shopping cart is empty*.
Leave the default be recorded only set in the Failure action field.
5. For the sake of comparison, we will also add a verifyBodyText validation to
Browser Action6 using *You just added “The Sixth Man” to your cart*.

6. Finally, we will validate the total on the final page of the clip, which in our case is
Browser Action25. The value to validate was $58.95.
6. Click Save on the Clip Editor toolbar.
Adding a Validation on an Element
Validations on page elements require that an exact ID or XPath be provided for a given
element. The Locator Finder is available to determine an ID for any action that has a
locator parameter, and also for any Wait, Validation, Output, or Property Set that has a
locator parameter.
1. Open the Info Window for Browser Action25.

2. In the Info Window, Validations tab click the green Plus sign to add the
validation form.
In the Command drop-down, select verifyElementText.
3. Click the Locator field.
The Locator Finder (to the right of the text field) will appear in a disabled state
initially.

27
 1. Click the Locator Finder to enable it. The target web site opens in a new window
(if it was not already open).

While the Locator Tool is enabled, moving the mouse over the Web page being
tested will highlight elements in the page with an orange border.

2. Navigate to the Total field (it doesn’t have to be the page showing the final total)
and hover the mouse until the orange border snaps-to and then click to select it..
The Locator field in the Clip Editor is populated with the most likely XPath locator
for the given selection. If more than one option was detected, the Locator field
drop-down appears. The Locator icon returns to its inactive state.

If it appears, click the Locator drop-down to inspect other possible values. In most
cases, the Locator will select the right XPath. However, if the validation fails when it
shouldn’t, it may be necessary to select an alternate value from among those the
Locator populates.

In the case of Browser Action25, only one value was detected in our example clip:
//div[@id='sliding_cart']/div/table/tfoot/tr[1]/td[2]/span

28
 3. Click Save on the Clip Editor toolbar.
4. In the Draft Composition you created earlier, click Play a second time. Or, if it is no
longer available, use the Play in Composition command a second time.

29
Analyzing Results
When play completes, the test is once again rated on the basis of its own criteria (the
default settings are all still in effect).

1. Once it appears, click Browser Action5 to examine the validation we added to

body text.

The early returns look good for Browser Action5 as the Waits and Validations section
shows that verifyBodyText passed.
2. With Browser Action5, still selected (or re-selected if the test comleted play and
jumped to the final actions) click the verifyBodyText link.

30
 When you do so, the Output field scrolls to reveal the verifyBodyText details.

3. Click the Output section Maximize icon.

31
 4. Click the Events List tab to see an event view on this browser action that includes
its validation(s).

5. Next, click Browser Action6 and inspect the same Events List details. This time
expand the Details arrow to view additional data.

32
 6. Next, click Browser Action25 and maximize its Output section to verify that the
expected and observed value in the Total field were the same.

33
Other Widgets Useful to WebUI / Ajax Tests
SOASTA CloudTest offers a comprehensive set of analytic widgets. The following are
particularly relevant to WebUI testing:
• The Composition Analysis widget renders the “Component Hierarchy” for your
test composition.

34
 • The Event Log widget presents Component details that can be sorted by
Events (Time, Component, Source, and Level) and to display Event Levels
by type (All, Errors, Statistics, and Informational). This shows the very low
level details of each step that occurred during the test.

See Creating a New Dashboard and Adding a Widget to a Dashboard for more
information about adding and configuring additional dashboards and widgets for your
test.

35
 SOASTA, Inc.
444 Castro St.
Mountain View, CA 94041
866.344.8766
http://www.soasta.com