Selenium IDE – plugin for FireFox – easy black box web application testing

In a previous article, Introduction to Blackbox testing of Web Applications using Selenium I have introduced Selenium, a framework for Web Application testing – any HTML/JavaScript Web Application, regardless of the underlying technology being it Java/J2EE, PHP, .NET, Perl, MOD_PLSQL or something else. In that article, we saw how test cases are created by creating lists of simple commands that either navigate, click, enter values in form items or make assertions about expected and experienced behavior. In this article we created TestCases by manually creating static HTML documents. While this is not terribly difficult or even cumbersome, due to the very readable structure of the commands, it still can be improved upon, as you will see in this article. Yesterday we had one of our Knowledge Center sessions, this one with Software Engineering as focus and Testing as special session topic. We first looked at Qute, a tool for Unit Testing PL/SQL code. Next, we took an in depth look at Selenium; it received a very positive reaction from the attendants. The enthousiasm was fueled even more when we introduced the Selenium IDE:

Recently, OpenQA – the organization behind Selenium – announced Selenium IDE. You can download this FireFox Plugin from http://www.openqa.org/selenium-ide/ . It is implemented as a Firefox extension, and allows you to record, edit, and debug tests. Selenium IDE includes the entire Selenium Core, allowing you to easily and quickly record and play back tests in the actual environment that they will run.

Selenium IDE is not only recording tool: it is a complete IDE. You can choose to use it’s recording capability, or you may edit your scripts by hand. With autocomplete support and the ability to move commands around quickly, Selenium IDE is the ideal environment for creating Selenium tests no matter what style of tests you prefer. See http://wiki.openqa.org/download/attachments/400/Selenium+IDE.swf?version=1 for a Tutorial (movie) that perfectly illustrates what the IDE can do.

Note: where Selenium due to cross domain browser security constraints normally cannot be used to test web sites or web applications originating from other domains than the Selenium framework itself – that’s why Selenium must be installed under the document root of the web application you are testing – , this Firefox Plugin is not bound by such constraints. That means that it can be used to test any web application, including sites such as EBay, Amazon and Google. See at the end of the article.

Let’s go and play a little with the Selenium IDE.

• Open a Firefox Browser, version 1.5 or higher
• Go to  http://www.openqa.org/selenium-ide/ and click on download
• Click on Firefox extension (requires Firefox 1.5 or 1.5.0.*) and the Selenium IDE will be downloaded as Firefox plugin. After download, you will have to restart Firefox to activate the plugin.
• After restarting the Firefox browser, open the page you want to test. For example, our Html Data Form: document Site2.html
• From the Tools menu in Firefox, select the Selenium IDE

• The IDE is opened.

From the File Menu, select New Test. Make sure that the Record button (upper right hand corner) is selected.

• Now go to the browser window with the web application that we want to test; in this case the Site2.html document. Perform the following actions:

• Click in the voornaam item
• Type a value of “Mijn Voornaam”
• Select the option verifyValue voornaam from the right mouse button menu

o    Type the value 27 dec 1969 in the field Geboortedatum; tab out of the field
o    Acknowledge the alert

o    Change the value in Geboortedatum to 27-12-1969
o    Set the Geslacht Radiogroup to Vrouw
o    Select Chinees for the Diner voorkeur
o    Submit the form by click on the Submit button
o    Acknowledge the alert

o    Set the value of Achternaam to Jellema and submit again

• Toggle (alt tab) to the Selenium IDE; it will look something like:

All our actions have been recorded, as well as an automatically assertTitle for the document and the verifyValue that we explicitly added. Alas, the test is not yet complete. First of all, the verifyValue command lacks the value it should check for. Select this command and enter the value “mijn voornaam” in the value field. It seems that the record action – type voornaam – is fooled by the onBlur trigger that fired and has recorded mijn voornaam as value to type. Change this to Mijn Voornaam.

• Try to run the test, by clicking the little green triangular icon. It will fail:

This is caused by the fact that we did not include commands to capture the alerts that are shown. Let’s rectify those omissions.

• Select the second Type geboortedatum command (the one shown in red). From the RMB menu, select Insert Command. Set the command to verifyAlert and the Target to “Valid format is*”.

 Also select the command type achternaam. Insert a new command, just prior to this one. Set it to verifyAlert with a Target of “*zijn beide verplicht*”

• Position the IDE on the top right hand corner of the browser window. Now run test again. The test should succeed now. You can follow all actions taking place in the browser window while the test is being performed.

• If you want to reuse the test or employ as static html documents like the ones we have used before, you can save the test from the File Menu. Save the current test as TestSite2b.html to the selenium\tests directory – where the other TestCase documents are also located. Open the TestSuite.html document and add the TestSite2b.html TestCase. Now open the TestRunner.html document in the selenium directory and verify that the TestSite2B testcase has been added. Run the TestSite2B TestCase to verify that this test that we created with the Selenium IDE is equivalent to the testcases we have earlier created by hand.

Testing External Web Applications

Normally Selenium cannot be used to test web sites or web applications
originating from other domains than the Selenium framework itself. due to cross domain browser security constraints. That’s why Selenium must be installed under the document root of the
web application you are testing – , this Firefox Plugin is not bound by
such constraints. That means that it can be used to test any web
application, including sites such as EBay, Amazon and Google. In a simple example, I open www.google.com and start the Selenium IDE. Next I type in the search field “selenium ide”, press search and inspect the results. I click on the link for the Selenium website (http://www.openqa.org/selenium-ide/) , select the demonstration and start playing the movie. All my steps are recorded properly and the test can easily be replayed. I can add additional verification steps. This test can be used to ensure for example that the Selenium IDE homepage is still on the first list of Google Search results for “Selenium Ide”. Not extremely useful, but a nice demonstration of how easy the Selenium IDE can be used to test (and script) just any Web Application.

The recorded test looks like:

We can replay the test, step by step:

And we can run the test in the Selenium TestRunner:

Resources

Download the Demo Application with Selenium tests (including key components of Selenium): SeleniumDemo.zip

Automate acceptance tests with Selenium– How to use the Selenium test tool for functional testing of a Ruby on Rails and Ajax application IBM DeveloperWorks Christian Hellsten 20 Dec 2005