Selenium IDE - Testing Web Applications in the Browser

Selenium is a suite of tools for testing web applications through web browsers. It mimics the user clicks, text entries, pulldowns, etc. and can be an important component of your testing arsenal. Selenium is a product of openqa.org.

This note walks you through the setup and basic operation of Selenium IDE, a plugin for Firefox that lets you record and playback tests of any web application. The plugin does not work with other browsers, but you can still use other components of the larger Selenium suite with IE, Safari, etc.

You can download the plugin from http://selenium-ide.openqa.org/download.jsp. Download it within Firefox and follow the installation and restart steps.

My setup uses Selenium IDE v1.0 Beta 1 in Firefox 2.0.0.14 on Mac OS X 10.5.2

The following examples use Google as the target site. The instructions will apply equally well to your own site.

1: Visit google.com in your Firefox browser and open up the IDE window by going to the Tools menu -> Selenium IDE

2: The IDE window allows you to record the browser events that you invoke as you type and click in the main browser window. In fact, the IDE starts out in Record mode so anything that you do in the browser will be echoed in the IDE.

3: In the main browser type in a Google query term, e.g. 'Craic Computing Tech Tips' then click the Google Search button. You'll get a page of search results and at the same time several lines will appear in the 'Table' panel of the IDE.

First you can see the 'Base URL' entry box at the top of the IDE now has the Google URL. Then in the table panel you will see 3 lines that show the actions you took in the browser.

• open - you opened '/' relative to the base url, i.e. the Google home page
• type - you typed 'craic computing tech tips' into the query box, named 'q' in the form
• clickAndWait - you submitted the form through the 'btnG' button (which is the name Google uses in its form)

If you were to run these commands via the IDE you would recreate the steps that you just did manually.

4: Where Selenium gets interesting is the ability to create test assertions using the page that was returned.

On the Google results page you should see one or two links to this blog, followed by links to craic.com and to various pages with the word 'craic' in them.

Select the phrase 'craiccomputing.blogspot.com', right-click and look in the popup menu for the line 'assertTextPresent craiccomputing.blogspot.com'. Clicking on this adds a new line to IDE with a 'assertTextPresent' command. Running the IDE commands will now test whether that text is present in the page.

You can add multiple assertions to the test and the 'Show All Available Commands' in the right-click menu displays all your options. For now we'll just use this one assertion.

5: Click on the 'Craic Computing Tech Tips' link on the Google results page. You'll be directed to this blog and you'll see another clickAndWait line appeara in the IDE. Add another test by selecting 'Archive of Tips' in the blog page, right-clicking and assertTextPresent as before.

6: Stop the recording by going back to the IDE and click the red button in the right hand corner.

7: You now have a set of commands that will test out two linked web pages. You can rerun this 'Test Case' by clicking either of the two green arrows on the left of the IDE toolbar (leave the one in a square box for now).

Watch your Firefox window when you do this and you will see Selenium mimic what you did before. At the same time the lines in the IDE panel will become colored as each command completes. Assertions that are true are colored a darker shade of green. Any that fail will turn red. You'll also see a bunch of logging messages appearing in the lower panel of the IDE.

Seeing Selenium run complex tests can be pretty cool. If things are moving too quickly you can slow down the events using the 'Fast Slow' slider in the IDE.

8: You can save the Test Case from the IDE menu (File -> Save Test Case). Selenium tests are stored in HTML format so name your test something like 'google_test_1.html'. Take a look at the file to see the format, or click the 'Source' panel in the IDE.

9: Go back to Google's home page again and 'Shift Reload' it to get a blank query box.

10: Create a new test case (File -> New Test Case) and you will see a 'Test Case' list panel appear in the IDE, along with a blank Table panel.

11: Click the red Record button in the IDE, enter a search term in Google and build your own test on some other site like the one you just did, with one or more assertTextPresent commands.

12: Stop recording, run the test to make sure it works and save it to a file with a .html extension as before (e.g. google_test_2.html) in the same directory as the first test.

13: With two test cases we can now save a Test Suite that will allow us to run both of them. Test Suites are also html format files with table rows for each Test Case (File -> Save Test Suite). Remember to give this a .html extension and store it in the same directory as the Test Cases. Take a look at the file in an editor to see the format.

14: With a Test Suite you can now make use of another Selenium interface, the TestRunner. You invoke this by clicking the small green arrow in a square box in the IDE toolbar.

This replaces your main browser contents with the 'Selenium Functional Test Runner' which has 4 panels. In the top left is a list of the component test cases. Clicking on any of these will bring up the contents of the test case in the center panel. The top right panel contains buttons to run the tests and shows the summary results from doing so.

The left most button with a green arrow will run all tests, the next one will run an individual test case. Try running all of them and you will see the various pages appearing in the lower panel of the browser. Green lines and test indicate the tests passed, red indicates failure.

With these simple examples you should not have any failures but you can create one by editing one of the test cases and changing an assertion line to some random piece of text.

The format used for Test Cases is straightforward and the Selenium documentation will show you a wide range of assertions and commands that you can use in creating your own tests in either the IDE or by editing test files. But starting out I would suggest using the record feature of the IDE and walking through your own or other complex applications, perhaps with multiple linked pages, to get a good sense of how Selenium works.

Things can get complicated if you are testing a site with pages that refresh or involve Ajax. Selenium is capable of handling these but get familiar with it on relatively simple sites first. Google Maps would not be a good idea...

Also, be aware that you should type text into entry boxes. If you use completion pulldowns with previous values then Selenium is not able to capture that text, at least at the moment.

Once you've mastered the basic you should look into other aspects of Selenium that will allow you to test IE and Safari and to integrate it with other testing frameworks in Ruby, Rails, etc.

In summary, Selenium IDE is a great way to automate testing of web applications from the perspective that really matters to your users - from the web browser itself. It can save you a great deal of pain in your development process - plus it is a really impressive way to show your clients how thorough your testing process is.

Thanks to everyone involved in producing this amazing piece of code.