Understanding Selenium IDE

Selenium IDE is a Firefox add-on developed originally by Shinya Kasatani as a way to use the original Selenium Core code without having to copy Selenium Core onto the server. Selenium Core is the key JavaScript module that allows Selenium to drive the browser. It has been developed using JavaScript so that it can interact with DOM (Document Object Model) using native JavaScript calls.

Selenium IDE was developed to allow testers and developers to record their actions as they follow the workflow that they need to test.

Installing Selenium IDE

Now that we understand what Selenium IDE is, it is a good time to install it. At the end of these steps, you will have successfully installed Selenium IDE onto your computer:

1. Go to http://seleniumhq.org/download/.
2. Click on the download link for Selenium IDE. You may see a message appear saying Firefox prevented this site (seleniumhq.org) from asking you to install software on your computer. If you do, click the Allow button.
3. A Firefox prompt will appear, as shown in the following screenshot:
   
4. You will then be asked if you would like to install Selenium IDE and the exporter add-ons. These have been made pluggable to the IDE by the work that Adam Goucher did. You will see a screenshot similar to the following one:
   
5. Click on Install button. This will now install Selenium IDE and formatters as Firefox add-ons.
6. Once the installation process is complete, it will ask you to restart Firefox. Click the Restart Now button. Firefox will close and then reopen. If you have anything open in another browser, it might be worth saving your work as Firefox will try to go back to its original state. However, this cannot be guaranteed.
   
7. Once the installation is complete, the add-ons window will show the Selenium IDE and its current version:
   

You have successfully installed Selenium IDE and we can start thinking about writing our first test.

Getting acquainted with the Selenium IDE tool

Now that Selenium IDE has been installed, let's take some time to familiarize ourselves with it. This will give us the foundation that we can use in later chapters. Open up Selenium IDE by going through the tools menu in Mozilla Firefox. Navigate to Tools | Selenium IDE. A window will appear. If the menu bar is not available, which is now the default in Firefox, you can launch Selenium IDE via Firefox | Web Developer | Selenium IDE.

Starting from the top, I will explain what each of the items are:

• Base URL: This is the URL that the test will start at. All open commands will be relative to Base URL unless a full path is inserted in the open command.
• Speed Slider: This is the slider under the Fast and Slow labels in the screenshot.
• : This play entire test suite icon runs all the tests in the IDE.
• : This play current test case icon runs a single test in the IDE.
• : This pause/resume icon pauses a test that is currently running.
• : This step icon steps through the test once it has paused.
• : This is the record button. This will be engaged when the test is recording.
• The Command drop-down list has a list of all the commands that are needed to create a test. You can type into it to use the autocomplete functionality or use it as a dropdown.
• The Target textbox allows you to input the location of the element that you want to work against.
• The Find button, once the target box is populated, can be clicked to highlight the element on the page.
• The Value textbox is where you place the value that needs to change. For example, if you want your test to type in an input box on the web page, you will put what you want it to type in the value box.
• The Table tab will keep track of all your commands, targets, and values. It has been structured this way because the original version of Selenium was styled on FIT tests. FIT (Framework for Integrated Testing) was created by Ward Cunningham. The tests were originally designed to be run from HTML files and the IDE keeps this idea for its tests.
• If you click the Source tab, you will be able to see the HTML that will store the test. Each of the rows will look like this:

    <tr>
      <td>open</td>
      <td>/chapter1</td>
      <td></td>
    </tr>

• The area below the Value textbox will show the Selenium log while the tests are running. If an item fails, then it will have an [error] entry. This area will also show help on Selenium commands when you are working in the Command drop-down list. This can be extremely useful when typing commands into Selenium IDE instead of using the record feature.
• The Log tab will show a log of what is happening during the test. The Reference tab gives you documentation on the command that you have highlighted, and is also useful if you forgot some command; users can just start writing command in the Command field, then select some like searched and read the reference.