In this article we will go through the basic steps on how to install and use the Selenium IDE plugin for testing your website.

Article Agenda:

  1. Install the Selenium IDE
  2. Record your first test case
  3. run your first test case and see the results
  4. Create and edit test cases manually
  5. Save test cases & test suits
  6. Load & run test suits
  7. More About Target Locators
  8. More Commands

Install the Selenium IDE

The first thing you need to do is installing the Selenium IDE. The Selenium IDE is a plugin for Firefox which is not available in the add-ons manager. You need to download and install it manually.

Since you want to install a Firefox plugin, you should perform all of the following steps in your Firefox browser.

  1. First  click to download/install the latest version of the Selenium IDE (2.9.0) here.Or go to http://www.seleniumhq.org/download/, scroll down to “Selenium IDE” and click on the link to download/install the latest released version.
  2. If your Firefox browser tells you, that it prevented the site to install software on your computer, click “allow”.
  3. When the next window “software installation” pops up, click on “install now” to install the different parts of the Selenium IDE. 
  4. Restart your browser.
  5. Now you should see the icon of the Selenium IDE in your toolbar.

 

Record your first test case

  1. If you have not already, open your Firefox browser.
  2. Navigate to google.com. We will use this site for our sample test case.
  3. Click on the Selenium IDE icon in the toolbar.
  4. The Selenium IDE opens and should look like this:
  5. If it is not activated already, click the record button to start recording your actions on the website.
  6. Now in the browser window, click in the search input field and type: “Selenium”
  7. Hit Enter
  8. Click on the first search result (“Selenium – Web Browser Automation”)
  9. Right-Click on the headline “What is Selenium?” to open the context menu.
  10. In the context menu go to “Show All Available Commands” > “assertText: css=h2 exact:What is Selenium?” and click on it.
  11. Switch to the Selenium IDE window. It should now look something like this:
  12. Congrats: You recorded you first test case, which tests if the headline on the page of the first test result when you search at google.com for “Selenim” is “What is Selenium?”

 

Run your first test case and see the results

  1. You should still have the Selenium IDE open with the just recorded test case.
  2. Click the second green play button in the toolbar to play the current test case.
  3. Probably the test run will fail and look like this:
  4. So what is going wrong here? The second step that we recorded is to type in “Selenium”. The next step ist to click on the first search result. The Selenium IDE tries to perform the third step directly after the second step, but google.com needs a little time to load the search results before we can click on it. The Selenium IDE “thinks” that the desired link is not there and that is why the third step fails.
  5. Fix: We give Google a little time to load the search result before we click on it. To do this do a right click on the third command and in the context menu choose “Insert New Command”.
  6. Type (or select from the list) in the Command-Field “pause” and in the Target-Field 2000. That will pause the test execution for 2000 millisecond = 2 seconds. That should be plenty of time for Google to load the test results.
  7. Hit the play button again.
  8. The test case should pass now and the Selenium IDE should look something like this:

 

Creating Test Cases Manually

If you prefer not to record the single test steps but to define them manually, please read through the next example. We will Test if we can search on Wikipedia for “Banana” and if the Headline of the page is “Banana”.

To understand this part of the tutorial you will need a basic understanding of HTML!

  1. Creat a new test case by clicking on “File > New Test Case” (or pressing Ctrl + N).
  2. Click in the first row and then type in the Command-Field: “open”. Type in the Target-Field: “https://en.wikipedia.org/wiki/Main_Page”
  3. After every command you add to the test case, you should hit the “Play current test case”-Button (the second green arrow) to see if your test case works so far.
  4. Click in the second row and type in the Command-Field or select from the Command-List: “sendKeys”
  5. Then, next to the Target-Field, click on “Select”.
  6. Klick on the search box of Wikipedia. 
  7. In the current Target-Field should appear “id=searchInput”. This is the locator which identifies the element on which we want to use the current command.
  8. Type in the Value-Field: “Banana”
  9. To execute the search, we need to submit the form of the search input field. The easiest way to locate an element on a web page is a unique id. To find out whether the wrapping form of the search input field has a unique id, right click on the search field and choose “Inspect Element” in the context menu.
  10. The developer tools open and we can inspect the html code. Here we see that the wrapping html-form has a uniqe id: “searchform”.
  11. With this information add the next command: submitAndWait with the target: “id=searchform”. We are choosing submitAndWait as an alternative to add “pause” again, sothat the Selenium IDE will wait for the page to load before continuing with the next test step.
  12. Add one more command: assertText, use the “Select”-Button next to the target field again to fill in the target by clicking on the headline “Banana” of the Wikipedia page. Type in the Value-Field “Banana”.
  13. Run the test case. The result should look like this: 

Save test cases & test suits

  1. Go to File > Save Test Case As… to save the current test case.
  2. Double-click on your second test case and save as well.
  3. Go to File > Save Test Suite As… to save the whole suite (the collection of your test cases).
  4. Now you can close the Selenium IDE and Firefox without loosing your work. Everything is safe.

Load & run test suits

  1. Open Firefox again and open the Selenium IDE by clicking the icon in the toolbar.
  2. Go to File > Open Test Suite…
  3. Browse to the location where you saved your test suite, select it and press “open”.
  4. To run the whole suite (all test cases in the suite) click on the first green arrow:
  5. Now the Selenium IDE will execute one after another all test cases that are in your current test suite. The result should look like this (only the names might differ depending on the names you chose for your test cases when saving them):

More About Target Locators

For most commands you need to use a locator in the Target Field of the Selenium IDE to tell the tool on which element of the web page the command should be used. There are four different ways to locate elements (which are the same for the Selenium IDE and FRET) that are explained here.

More Commands

In this tutorial you already used the some important commands:

  • open
  • type
  • pause
  • clickAndWait
  • assertText
  • sendKeys
  • submitAndWait

There are various more commands to simulate all kinds of different user interactions with a website. We are working on a command reference and until then please refer to seleniumhq.org and the Selenium Documentation.