Automated website testing in Firefox with Selenium IDE plugin

Introduction

User experience testing is a crucial element of web quality assurance.   One UX testing solution we use internally is a Selenium IDE plugin for Firefox, which allows you to record interactions with multiple elements and multiple web pages, organize recorded tests into sets (suites) and save them for future use.  Below is a screenshot showing Selenium IDE popup that appears in Firefox after plugin is installed and activated, with test cases organized on the left, playback and recording controls on the top, actions being recorded in the main content area on the left and log area on the bottom.

Installing Selenium IDE

1. Install Selenium IDE by visiting seleniumhq.org/download/

2. Go to the "Selenium IDE" header and you should find the link with the latest released version available. Click on the link and download Selenium.

3. Now go to your downloads directory and double click on the selenium-selenium-ide-X.X.X.xpi file.

4. Firefox (which needs to be set as your default browser) will display the following message:

   

5. Click "Install Now" to continue

6. You will have to restart Firefox in order to continue with the installation

7. After restarting Firefox, Selenium IDE icon will be available on browser Toolbar.

   

How to use

Creating a Test Case

1. Start Selenium IDE from Firefox's Tool Bar.

2. Add "Base URL" to specify web page on which the test is going to be performed. This URL can be changed to perform the same test case on a different URL.

   

3. Once you've added the Base URL you can press the "Record" button (red round button top right) and start performing a manual test to the site (filling inputs, clicking links, etc.).

4. As you perform your manual test, Selenium will populate its commands table with all your interactions on the page.

   

5. After you've finished recording your test, press the "Record" button again to stop the recording process.

6. Once your test is done recording, you can use the "Play" buttons to play either and entire Test Suite or current Test Case.

   

7. Right click on the test case's title, at the moment "Untitled *" and click on "Properties".

   

8. Here you can change the Test Case's Title to something more descriptive as you will probably have many test cases in a single Test Suite.

   

9. Once your test case has a title, you can proceed to save it. Click Firefox's menu File> Save Test Case As … and add a name to the file. Test Cases could be saved as HTML files.

   

10. If you save a Test Case as an HTML file you can later double click on it and see the table on any browser.

    

Editing an existing Test Case

Editing an existing Test Case it's simple:

1. Start Selenium IDE from Firefox's Tool Bar.

2. Click Firefox's menu File> Open … and browse to the Test Case file that you want to work with.

Once loaded there are several things you can do to a Test Case:

• You can "Edit" a command

• You can "Add" new commands

• You can "Delete" commands

Editing a Command

1. Click on a command from the Commands Table to select it.

2. Right below the commands table you'll see the selected command's information

   

3. Here you can change the command executed selecting from the drop down menu. You CAN Find an Entire list of Selenium's commands in the Selenium Reference ("broken link").

   

4. Once a command is selected you can see a short reference at the bottom of the app, where you'll find the command's arguments and description.

   

5. You can also edit the target of the command by changing the target's id.

   

6. If you do not know the target's id you can click on "Select" and then click on the website's element you want to apply the command to, this will get you its id.

   

7. And finally you can change the value used with the selected command by changing the "Value" field.

8. After you've finished editing commands you can proceed to save your test case as previously explained.

Adding a new command

1. Right click anywhere on the command's table and select the "Insert New Command" option.

2. An empty new command will be added to the table.

3. Edit it as previously explained.

4. After edited, drag and drop the command to its required position.

5. After you've finished adding commands you can proceed to save your test case as previously explained.

Deleting command

1. Go to your commands table and right click on the command you want to eliminate.

2. Select "Delete" from the menu.

3. After you've finished deleting commands you can proceed to save your test case as previously explained.

Reusing Selenium Test Cases

As stated on the Selenium IDE Documentation here:

"The Base URL field at the top of the Selenium-IDE window is very useful for allowing test cases to be run across different domains. Suppose that a site named http://news.portal.com had an in-house beta site named http://beta.news.portal.com. Any test cases for these sites that begin with an open statement should specify a relative URL as the argument to open rather than an absolute URL (one starting with a protocol such as http: or https:). Selenium-IDE will then create an absolute URL by appending the open command’s argument onto the end of the value of Base URL…"

Related Links

• Download Selenium
• Selenium Documentation
• Selenium Support
• More Information
• Selenium Reference 1.0.1 ("broken link")