Getting Started with ExtJS application testing
This document will help you get up and running with RIATest, a powerful cross-browser test automation tool for ExtJS applications.
A sample project demonstrating basic automation for ExtJS widgets is located in C:\Program Files\RIATest 6\samples\html\extjs (Mac OS X: /Applications/RIATest 6/samples/html/extjs).
Before you begin
System RequirementsIn order to use RIATest to automate testing of your ExtJS application you need:
- Microsoft Windows XP SP2, Vista, Server or Windows 7 or 8 or Mac OS X 10.8.1+
- Mozilla Firefox 18+, Google Chrome 18+, Internet Explorer 8+
- Optional: Windows UI Automation API 3.0 (Required if you want to automate Windows GUI objects).
Creating a RIATest project
First create a RIATest project.
- Run RIATest IDE and select File, New Project.
"New Project" window appears:
- Select project type "HTML application testing", specify a project name and a folder to store the project:
- In Application URL or File specify one of the following:
- Location of your application's HTML file, e.g. http://localhost/myapp/app.html
- File path of the HTML file, e.g. C:\My Projects\My App\app.html.
- Click OK to close the window and create the project.
- Select Run, Launch Application.
The browser launches with your application loaded in the browser window. The RIATest IDE title bar displays "Launched" and then eventually "Ready".
- Switch back to RIATest IDE and verify that its title bar shows "Ready"
and that the message log shows the following lines:
Launching "C:\Program Files (x86)\Mozilla Firefox\firefox.exe" -P riatest5 -no-remote ...
To record a script
- Confirm that RIATest IDE shows 'Ready' in the title.
- In RIATest IDE, select Project, Add New Script. Enter a name and click Save.
- Select Run, Start Recording.
RIATest IDE title now show "Recording".
- In your application window, perform the test actions. If required, generate
checkpoints (see below).
The RIATest IDE records actions as statements in the Test Script window.
- To stop recording, select Run, Stop Recording.
- Select Run, Terminate Application to close the browser window containing your application.
Note: recording of HTML and ExtJS applications is not supported in Internet Explorer.
While recording a script, you can generate checkpoints. A checkpoint stores the values of the selected component. During playback, RIATest IDE compares the current values with those stored in the checkpoint and reports accordingly (see below).
You can hand-code checkpoints, but it is simpler to generate them during the recording process.
To automatically generate a checkpoint
- Hold down CTRL+SHIFT and click the component.
The new checkpoint is based on those values of the component's properties that are designated for default verification.
TIP: With CTRL+SHIFT held down, hovering the mouse over an element highlights it with a blue frame. See for example hightlighted cell ".13" of ExtJS GridPanel in the below picture:
To generate a checkpoint based on a selection of the component's properties
- In RIATest Object Inspector window, click Inspect then hover the mouse over a component.
A blue frame highlights the component. Its class, name and all available properties are displayed.
- Click on your chosen component.
- In RIATest Object Inspector window, click Verify button and select Verifty Properties menu item.
The selected component's properties are displayed:
- Use the checkboxes to include properties in the checkpoint.
- Click OK.
The resulting checkpoint stores the values of the selected properties, only.
Editing your recording
You can stop and restart a recording at any time. This enables you to correct any mistakes.
To delete mistakes
- If you have not already done so, in RIATest IDE, select Run, Stop Recording to stop the recording.
- Select the unwanted actions and delete them.
- Select Run, Start Recording.
Inspecting the components
RIATest provides an easy way to browse GUI elements during recording.
- In RIATest IDE, click Inspect then hover the mouse over
a component in the browser window.
A blue frame highlights the component
- Click anywhere to exit "inspect mode". The inspector window will be shown and the class, name and all available properties
of the selected component are displayed:
Note: Inspecting of HTML and ExtJS objects is not supported in Internet Explorer.
Playing back test scripts
When you play back a test script, the Message Log reports the results.
- Successfully passed checkpoints generate green messages.
- Failed actions and checkpoints generate red messages.
The Message Log also shows the number of scripts that ran without any errors, and the number of scripts that encountered problems.
To run a test script
- In RIATest IDE, select File, Open Project and select your project.
- Select Run, Run Without Debugging.
The browser window opens with your application loaded. RIATest IDE replays the recorded actions and checkpoints, recording the results in the Message Log.
After playback finishes, your application terminates and the browser window closes.
If you encounter unexpected errors during playback, you can debug your scripts.
To start a debugging session
- In RIATest IDE, select Run, Run Tests.
Scripts run as usual. If any problems are encountered (such as checkpoint or action failure), the script suspends with the problem line highlighted.
- Do one or more of the following:
- Inspect the most recent message in Message Log. This usually explains the problem (e.g. Expected vs. Actual values will be shown for a failed checkpoint).
- Hover the mouse over variable names to examine their values.
- Switch to your application and inspect components and their properties.
Writing test scripts manually
Sometimes you will need to perform sophisticated tests such as repeating the same sequence of user actions, or conditionally executing actions depending on the state of your application. For these, recording a script is not suitable - you need to write one manually.