Chapter 7. Tutorial: Starting to Test Web Applications

Table of Contents

7.1. Squish Concepts
7.1.1. Making an Application Testable
7.2. Creating a Test Suite
7.3. Recording Tests and Verification Points
7.4. Inserting Additional Verification Points
7.4.1. Test Results
7.5. Creating Tests by Hand
7.5.1. Modifying and Refactoring Recorded Tests
7.5.2. Creating Data Driven Tests
7.6. Learning More

This tutorial will show you how to create, run, and modify tests for an example web application. In the process you will learn about Squish's most frequently used features so that by the end of the tutorial you will be able to start writing your own tests for your own applications.

This chapter presents most of the major concepts behind Squish and provides the information you need to get started using Squish for testing your own applications. This tutorial does not discuss all of Squish's features, and those that it does cover are not covered in full detail. After reading this tutorial we recommend reading the User Guide (Chapter 13), and at least skimming the API Reference Manual (Chapter 14) and the Tools Reference Manual (Chapter 15), so that you are familiar with all the features that Squish has to offer, even if you don't need to use them all straight away.

This tutorial is divided into several sections. If you are new to Squish (or to the new IDE introduced in Squish 4), it is best to read all of them. If you are already using Squish you might want to just skim the tutorial, stopping only to read those sections that cover any new features that you haven't used before—or you could just skip straight to the User Guide (Chapter 13).

Whenever we show how to achieve something using the IDE we will always follow with an explanation of how to do the same thing using the command line tools. Using an IDE is the easiest and best way to start, but once you build up lots of tests you will want to automate them, (e.g., doing nightly runs of your regression test suite), so it is worth knowing how to use the command line tools since they can be run from batch files or shell scripts. (Note that we use the new IDE introduced in Squish 4 throughout the tutorial. The old IDE is still packaged with Squish and so is still available; however, we recommend using the new IDE.)

For this chapter we will use a simple Address Book application as our AUT. The application is shipped with Squish in squish/examples/web/addressbook. This is a very basic application that allows users to interact with a fake existing address book or create a new one, and add, edit, and remove entries. Despite the application's simplicity, it has all the key features that most standard web applications have: buttons, radio buttons, line edits, pop-up dialogs, and a central area—in this case showing a table. All the ideas and practices that you learn to test this application can easily be adapted to your own applications. And naturally, the User Guide (Chapter 13) has many more examples and shows how to test lots of web-specific features, as well as all the standard editing widgets.

The screenshots show the application in action.

The Web addressbook-4.1.html example.
Adding a new Address.
[Note]Using the Examples

This tutorial's example is an HTML and JavaScript web application entirely contained in the file squish/examples/web/addressbook/addressbook-4.1.html. However, Squish for Web is designed to test real web applications served by a web server, so Squish can't be used to test a plain .html file in the file system. Fortunately, it is very easy to work around this by running a tiny web server on your machine, and such a server is provided in file squish/examples/web/addressbook/server.py. This server is written in Python 2; simply run it from the command line using the Python interpreter on your system or the one supplied with Squish. Once the server is running you can access the web addressbook example application using the URL http://localhost:9090/addressbook-4.1.html. (If port 9090 conflicts with anything else on your machine simply pass an unused port number as a command line argument to server.py and it will use that instead. Naturally, if you use a different port you must use that port throughout the tutorial.)

[Note]Windows Security Dialog

If you run server.py on Windows, depending on your security settings, Windows might pop up a dialog asking if you want to allow or block the squishserver and/or server.py from running. If you get this dialog, you must choose Unblock for the squishserver so that Squish can function correctly and you must unblock server.py to be able to test the web addressbook tutorial example.

[Note]Safari on iOS Users

To test web applications on iOS devices (e.g., iPhones and iPads), once Squish for Web is installed, some extra iOS-specific setup is required. See Installation for Safari Testing on iOS (Section 3.1.5).

[Note]Konqueror Users

Due to a technical limitation in Konqueror, it is only possible to test websites running on localhost.

If you need to access web pages which are not located on the local machine you can circumvent this problem by forwarding the remote port of the webserver to localhost. For instance, you can use ssh to forward the connection. For example, if you want to test say, www.google.com, you can forward it using ssh like this:

ssh -L 8080:www.google.com:80 localhost

Now simply direct Squish to use http://localhost:8080 instead of http://www.google.com and you will able to test the site.

[Note]Firefox Users

Unfortunately due to a technical limitation it is not possible to record or play back tests on Firefox if the browser is already running. (If you try a new tab will appear in Firefox but the test won't run.) The solution is to close Firefox; then, when you record or play back a test, Squish will start and close Firefox automatically as needed.

In the following sections we will create a test suite and then create some tests, but first we will very briefly review some key Squish concepts.