Now, let's get our hands dirty! We will be playing with Selenium Interactive Development Environment (Selenium IDE or simply IDE) in this section. IDE is one of the greatest starting points for the Selenium project. It allows someone who has never programmed in his or her life to record a useful test in a matter of minutes and start adding new tests to the test suite in no time.
Selenium IDE is a browser plugin that only works in Firefox browser. It is easy to install and integrates well with the functionality of the browser. Use these easy-to-follow steps to install the IDE in the browser:
In your Firefox browser, navigate to the Selenium website at http://seleniumhq.org:
Click on the Download Selenium link on the home page shown:
In the Selenium IDE section on the Download page, click on the link for the latest released version, as shown here:
Allow Selenium to be installed on your computer by clicking on Allow on the following permission dialog:
The following dialog will show you all of the Selenium IDE components that will be installed on your browser. Click on Install Now when it becomes clickable after several seconds. The installation dialog is shown in the following screenshot:
Restart Firefox.
Now that the plugins have been installed, you should see a little icon in the browser:
Clicking on that button will reveal the Selenium IDE window, as shown in the following screenshot:
Just like many commercial testing tools, the Selenium IDE supports the Record-Playback style of writing tests. The IDE monitors your browser and notes down any actions that you perform. By compiling a list of actions, a test slowly emerges. Let's start recording our first test by following these steps:
Open the Selenium IDE in the Firefox browser and make sure the recording mode is on, as shown in following screenshot:
In a new tab, navigate to http://awful-valentine.com, as shown in the following screenshot:
Click on the search text field and type in
cheesein the search bar and click on the submit button. The following screenshot shows the search box and the submit button:
As we are performing these actions, the IDE is recording all of them in the background. We can inspect all of the recorded actions in the IDE window, as shown in the following screenshot:
Let's walk through the table inside the IDE window to get a better understanding of each item.
The table has three columns in it:
The first column is Command. This is where the action of the command is defined, such as a
clickortype.The second column is Target, where the command will be performed.
Finally, the third column is Value. This section is only used when the target element, such as a text field, needs some text inserted into it.
We have our simple script now; let's save it so we can reuse it later.
Our next step is to save the test run to a file:
Click on the File option:
Choose Save Test Case.
Name the file
search_test.htmland save it.
Notice that we saved the test as an HTML file. This is because Selenese, the language that the IDE uses to record and playback tests, is just an HTML table. You can even open the search_test.html file in your web browser and see how it looks! In the following screenshot, we have Selenium IDE and the saved test opens side by side for easy comparison:
Right away, you can see that the IDE (on the left) and the saved Selenese output displayed in a web browser (on the right) look extremely similar.