Selenium IDE Tutorial

February 4, 2013  |  Automation, QA, Selenium

To start our tutorials off, let’s start by introducing Selenium and what it’s good for as well as discuss one of the tools of the Selenium suite, the Selenium IDE.

The Selenium IDE is an excellent starting point to start using and learning Selenium. For a short description, the Selenium IDE is a plugin for the Firefox browser that let’s one click and record actions in the web browser. In addition, it adds options to your contextual menu (the right click menu) that helps you create tests. As a result, you can very quickly create and prototype scripts for automation.

To get started, head over to the Selenium homepage at http://seleniumhq.org and download the IDE (at the time of this writing, it’s located at http://release.seleniumhq.org/selenium-ide/1.10.0/selenium-ide-1.10.0.xpi). Remember that this is a Firefox plugin so it’s vital that you download and install it in Firefox.

Once you have it installed, start it up by hitting Tools -> Selenium IDE (Ctrl + Alt + S as a keyboard shortcut, if you’d prefer).

SeleniumIDEFirefox

 

The IDE should come up so we’re well on our way to creating our first automated script using the IDE. For our first script, let’s pretend we’re working at Google and we want to make sure that when someone searches for something, their query remains in the search field on the results page. Before we get to creating our script, let’s familiarize ourselves with some of the basic functionality as well as the UI.

SeleniumIDEUI

 

The parts that we really need to know right now:

  1. The Base URL field – This is where we put the URL of the web page that we want Selenium to start from. In our example case, we want to put http://www.google.com there.
  2. The controls – Right under the Base URL field, we have the controls. From the various buttons, sliders, and toggles here, we can control the execution of our test as well as whether or not we’re actively recording.
  3. The table – Here is where our script’s functionality will appear/live as we create it. We can also tweak our scripts and add additional commands if we desire.

For now, those are the 3 basic areas that we’re concerned about. We’ll revisit the other areas when we delve deeper in.

To start off automating our test case, let’s first navigate to http://www.google.com in Firefox and fire up the Selenium IDE if it’s not already open. If there are any commands in the table, highlight them and delete them for now.

Now, toggle on the record button (the red circle on the right hand side of the controls) and switch back to Google. From now on, all actions we take in the browser will be recorded by Selenium IDE!

As a reminder, our test is “When we search for a query on Google, the query string should remain on in the query field on the results page.

In the search field, let’s put in “SeleniumHQ” and hit enter. When the page finishes loading, right click the search field and select verifyValue.

SeleniumIDEVerifyValue

 

Now let’s toggle off the recording button in the IDE and we’re finished! As you can see, all the actions we did have been recorded into the table to be played back at our convenience.

SeleniumIDEcompleteTest

Now if you click on the click on the ‘Play Entire Suite’ button in the controls section, Selenium IDE will playback the exact steps as well as verify that the text is present! Congratulations on creating your first QA automation test! The ability to record and play actions using the Selenium IDE makes creating automated test cases just that simple. Even if you decide to not learn anymore about Selenium, you can still really power up your QA prowess using just the little bit that you’ve learnt here.

Using the IDE is that simple. By leveraging this tool, we can quickly create automated tests that allow us to save on tons of repeatable actions and time. However, we’ve only really just begun scratching the surface of the IDE. In our next installment, we’re going to show how you can customize the tests and create all sorts of advanced automated test cases. However, even though the Selenium IDE has an amazing amount of functionality, it pales in comparison to the other part of the Selenium testing suite, specifically SeleniumWebDriver. For example, the Selenium IDE is restricted to only Firefox, which as we all know, is not the only browser in town and it also lacks the ability to scale. So in additional to exploring advanced usage of the Selenium IDE, we’ll also explore how we can leverage the IDE to help supply test cases for SeleniumWebDriver, which doesn’t have the same shortcoming as the IDE.