An Introduction To Selenium IDE

An introduction, showing how to create a test case and test suite with Selenium IDE

I discovered Selenium IDE in 2006 when I was looking for a way to automate testing using a real browser. I found it simple to pick up and surprisingly powerful, and since then it’s become even more so.

Selenium IDE is the simplest of the tools in the Selenium suite, and the quickest way to get started with creating scripts, however it only supports record and playback within Firefox. For automating other browsers you’ll need to use one of the more advanced Selenium tools, such as Selenium RC or Selenium 2 (or Selenium Grid if you want to run your tests in parallel), but let’s not get ahead of ourselves! First, let’s install Selenium IDE, which is really just an add-on for Firefox.

Okay so let’s launch Firefox and head over to http://seleniumhq.org/download/. Click the download link next to Selenium IDE. You may need to allow Firefox to start the installation process. Once it’s installed, you will be prompted to restart Firefox.

With Firefox restarted you should now find Selenium IDE is installed and available in the Tools menu. You can also open Selenium IDE in a sidebar by selecting View » Sidebar » Selenium IDE. The functionality is the same regardless of the way it’s launched.

If you launch Selenium IDE from the Tools menu you will be see a window that looks like the one below.

No need to panic, there’s quite a few things here but we only need to understand a few of them to record and playback a simple script.

In fact, let’s record some commands before we even explain the interface. Move the Selenium IDE window to one side so that you have both Firefox and the IDE on screen at the same time. In Firefox, open the website http://quality.mozilla.org/ and click on the ‘What is QA?’ link on the right beneath ‘Getting Started’. Once the page has loaded, take a look at what Selenium IDE has done… It’s recorded your actions! That’s because by default Selenium IDE is recording when you launch it. Try clicking the ‘Play current test case’ icon and watch Firefox replay your actions.

So what did having the record mode on do for us? Well, first it filled in the ‘Base URL’, which is the domain name of the website that you want to create a script for. Keeping this separate from the rest of the script means you can easily change it, which could be useful if you had two very similar sites that need testing.

Two commands also appeared in our script. The first command was ‘open’ and the location we opened was ‘/’, which is normally the home page of any site. The second command was ‘clickAndWait’, which is appropriate because we clicked on a link, and we’d typically want to wait for the resulting page to load. Don’t worry too much about the Target and Value columns for now, we’ll look at those in more details later in the series.

Now our script is pretty good, but it’s not a test until we have some checks. In Selenium IDE you can assert things and you can verify things. The difference is quite simple, if an assert fails then the script will stop running at that point, however if a verify fails, the failure will be logged but the script will continue. A common use for this is to assert the title of the page is correct and then verify items on the page – it doesn’t make much sense to continue verifying things if you’re on the wrong page, and once you know you’re on the correct page you probably want to know everything that’s failing. Let’s add some checks to our script.

In Firefox, you should still have the ‘What is QA?’ page open. Right click anywhere in the page, and you should see a context menu popup like the one on the left.

Highlight the ‘Show All Available Commands’ item and another menu should appear. Find the command assertTitle What is QA? | QMO – quality.mozilla.org and select it. You should see a new command appear in Selenium IDE. Now we’ll add a verify command to check the page content.

In Firefox, click and drag over the heading ‘What is QA?’ to highlight, then right-click and select the item verifyTextPresent What is QA?. We’ve now got a test case! If you click ‘Play current test case’ in Selenium IDE again, the script will run again and the two checks will pass.

Now our script is much better, but there’s still something that concerns me. The last command is vague because it only checks that ‘What is QA’ appears somewhere on the page. If you look closely, you will find that this text actually appears twice in the page: in the heading, and also just above the heading where the location of the current page is shown. This means that if just the heading changed our test would still pass, and a genuine bug could slip through!

A better command to use here is ‘verifyText’ as it takes a location of the text that you want to check. It also gives a much more useful message if it fails. To use it, highlight the ‘What is QA?’ text again, right-click, but this time select verifyText //div[@id=’post-1210′]/h1 What is QA?. The bit in the middle is the locator, which I’ll explain in more detail later in this series. Delete the verifyTextPresent command by clicking on it and hitting the delete key on your keyboard, and run the test again.

So what happens if the test fails? Click on the ‘assertTitle’ command in Selenium IDE and change the value in the ‘Target’ field to something else. Now run the test case again and you should see something like the screenshot below.

As you can see the command after the ‘assertTitle’ has not gone green or red. This is because an assert failed and as a result the script stopped running. You can also see the details of the failure in the Log section at the bottom of the window. It says that the actual value does not match the expected value, and provides both values so that you can easily see why the check failed. Remember that if a verify fails then these message will be logged, but the script will continue through the remaining commands.

If we really wanted to test this website, then a single test case probably isn’t enough. Of course we could add commands in this test case to navigate to a second page, perform some checks, and continue to a third page, etc. The problem here is that your test case will soon become unmanageable. That’s where test suites become necessary. A test suite is essentially just a list of test cases that you want to run consecutively.

We’ve actually already started a test suite, but there’s just one test in there. If you click File » New Test Case, the test suite panel should appear, with two test cases listed: Untitled, and Untitled 2. The reason these are untitled is because they haven’t been saved yet. Saving is as simple as File » Save Test Case and works in much the same way as other applications.

With the new test case selected, add some commands to navigate to the ‘WebQA’ team page, assert the page title, and verify the main heading. Check that you record mode is is, as this is automatically disabled when you play back a test case. Once you have finished, your Selenium IDE should look something like the screenshot below.

Now that you have a test suite you can click the ‘Play entire test suite’ icon and you will see both of your test cases running in sequence!

It’s not recommended to limit your limit your automation to tests written and running in Selenium IDE. The ideal situation is to use Selenium IDE as a way to quickly prototype and generate new tests for running across multiple browsers (possibly even in parallel) using Selenium RC or Selenium 2 and a mature programming/scripting language.

For more information on Selenium IDE I would recommend the official documentation.

If you have any questions you might find the Selenium Users group useful.

If you find any issues in Selenium IDE please check if it’s already been raised on the official issue tracker before raising a new report with as much information as possible. Also, please add the ‘Component-IDE’ label to any new issues.

You might be interested in... A Day of Lean Software Testing

Tags: ,

8 Responses to “An Introduction To Selenium IDE”

  1. AMarch 17, 2011 at 8:50 am #

    I would have expected that to demonstrate Selenium IDE with the latest version.

  2. Dave HuntMarch 17, 2011 at 1:53 pm #

    @A – Well spotted! The screenshots are all using Selenium IDE 1.0.8, and the latest version is 1.0.10. Although two versions have been released since I took the screenshots, they mainly addressed bugs, and the major functionality has not changed. Also, we’re hoping to release a new version of Selenium IDE soon so even 1.0.10 will be out of date before long…

  3. Robert BarnardMarch 18, 2011 at 5:24 pm #

    Dave,
    You’ve only scratch the surface, but for many automation scenarios, this will save a lot of labor.

    This is a very good and concise primer on Selenium IDE. I like how you included helpful links to the community. Good job!

  4. Sir GeekMarch 18, 2011 at 6:27 pm #

    Also, Keep in mind that testing of applications written using a Javascript library like EXTjs.js will complicate things greatly (dynamic names, needing to wait for things to appear on the screen before continuing the tests, etc.)

  5. Dave HuntMarch 18, 2011 at 11:52 pm #

    Thanks for you comments!

    @RobertBarnard – Agreed, there’s a lot more to cover, and I intend to do so in future guest posts.

    @SirGeek – So many web applications these days are rich in JavaScript, and present a lot of the complications that you mention. As this is a more advanced topic I am saving it for a future post.

  6. PaquitoSoftApril 13, 2011 at 10:12 pm #

    Hi Dave.
    Thanks for spending your time writing this article. I think it’s a great quick introduction to Selenium.

    Cheers

  7. AlbertMay 14, 2011 at 5:34 pm #

    just what i needed now!

Trackbacks/Pingbacks

  1. A Smattering of Selenium #45 « Official Selenium Blog - March 28, 2011

    […] An Introduction To Selenium IDE is the first in a series of articles that I might not normally link to but I read drafts of and know where they are heading. Either that or I am completely confused […]