In Squish, tests can either be written by hand, they can be recorded - or you can use a mixture of the two. We'll start with creating a new test case and then recording a script of user interactions. Afterwards, we will augment the script with our customizations.
First, let's create a new test case. To do so, open the context menu of our newly created suite_validator_js suite by clicking on the item labeled suite_validator_js with the mouse button. Then, select New Test Case... to create a new test case. An input field will be shown, waiting for you to enter a name for the new test case. For this tutorial, we will go for “firstTest” as the name for our first test case.
![[Tip]](images/tip.png) | Tip |
|---|---|
Another way to create a new test case is to select | or press Ctrl+N. This will create a new test case in the currently active test suite (the one shown in the tree at the left side of the Squish IDE). |
After creating a new test case, your tree view at the left hand side of the Squish IDE should look similar to what is shown in the next picture.
Now everything is ready to record a test.
To record a test, either select Record... from the context menu of the test case item in the tree (the one labeled tst_firstTest in our example), or go via the menu bar by selecting ||.
This will minimize the Squish IDE into a small control window, shown in the upper left corner. A dialog with the caption Record Settings will pop up, allowing you to fine-tune some recording settings such as whether to use any initial test data and what kind of synchronization method to use. For most situations, including ours, just sticking to the defaults is fine.
![[Note]](images/note.png) | Note |
|---|---|
This dialog also lets you fine-tune the way web objects are identified. This is not interesting to us in this tutorial though, so just set it to Multiple properties, which is the default. |
The dialog will also ask you for the URL of the web page to test. Since http://validator.w3.org/ is the web page we want to test, we enter that into the input field labelled Start URL.
After having entered the URL, pressing the Record button closes the dialog and after a few moments you should see your preferred browser starting up, showing the specified web page.
Now comes the fun part. Just interact with the web page as you would do normally. Click on things, change values in input fields, anything. When you are done, close your browser window to bring the Squish IDE back, showing a script of the recorded actions you did.
In this case, the following actions were done:
A click on the Extended Interface link in the Validate by URL box.
Waiting for the new page with the extended interface (http://validator.w3.org/detailed.html) to show up.
Entering
http://www.froglogic.cominto the input field labeled Address:.Changing the value of the combo box labeled Doctype: to HTML 4.01 Transitional.
Checking the box labeled Show Outline.
Unchecking the box labeled Verbose Output.
Clicking the Validate this page button.
Waiting for the page with the results of the check to show up.
Closing the browser window.
| Note |
|---|---|
For stopping the recording, you could either close the
browser window, or press the End Recording button
in the Squish control bar
( |
Now, let's have a look at the generated script and what it does.
The actions resulted in the following JavaScript script. Depending on how much the actions you did on the website, your script might differ more or less from the one shown here. Before we go on, it might be a good idea to look at this script for a minute or two, trying to figure out what all the calls do.
function main()
{
snooze(1.5); 
loadUrl(":http://validator.w3.org"); 
snooze(5.6);
clickLink(":{tagName='A' innerText='Extended Interface'}"); 
snooze(2.2);
setContext(":detailed.html"); 
setFocus(":{tagName='INPUT' id='uri' name='uri' type='text'}"); 
snooze(8.4);
setText(":{tagName='INPUT' id='uri' name='uri' type='text'}", "http://www.froglogic.com"); 
snooze(2.0);
selectOption(":{tagName='SELECT' id='doctype' name='doctype' type='select-one'}", "HTML 4.01 Transitional"); 
snooze(2.1);
clickButton(":outline_checkbox"); 
snooze(0.7);
clickButton(":{tagName='INPUT' id='verbose' name='verbose' type='checkbox' value='1'}");
snooze(0.6);
clickButton(":{tagName='INPUT' type='submit' value='Validate this page'}"); 
snooze(10.5);
setContext(":check");
snooze(0.4);
closeWindow(":[Window]"); 
}
Here's a short explanation what's happening:
| The You will notice that there are a lot of snooze statements in recorded scripts. You can change the amount of time which they wait before execution of the script proceeds (or you can remove them altogether) if you like, but please note that this could break the script. For instance, after clicking on a link, you should wait some time for the new page to load, so that the following script statements work properly instead of trying to work on a page which wasn't loaded yet. |
| We point our browser to the web page we want to test. |
| This was recorded when we clicked on the Extended
Interface link. The |
|
|
| The |
| Here we enter “http://www.froglogic.com” into
an input field - entering text into input fields is done using the
|
| This statement selects the HTML 4.01 Transitional
entry in the combo box labeled Doctype: by calling
the |
| This call to the In this case, Squish already determined an easily human readable object name and created a corresponding entry in the object map (see Object Map (Section 16.9)). |
| Here's another invocation of the |
| Finally, we close the window using the
|
To check that everything works as expected so far, you
could now run this script and watch Squish replaying your
actions. To do this, just press the little “Play”
button (
)
in the toolbar of the Squish IDE.