Selenium IDE Tutorial:

Selenium IDE Tutorial: Learn Automated Testing with Selenium IDE

DECEMBER 2, 2013 BY KASIA MIKOLUK1 COMMENT

Selenium IDE is a fully-featured Integrated Development Environment (IDE) that installs as a plugin in Mozilla Firefox and enables developers to test their web applications through Selenium. With the Selenium IDE, you can record user interactions with the web browser and play them back to test for errors. It’s a powerful, robust IDE that radically simplifies and automates the QA testing process.

In this tutorial, we’ll learn the basics of the Selenium IDE, how to use it, and what you can use it for. To learn more about software and web application testing, check out this course on Selenium IDE and WebDriver.

What is Selenium IDE?

Selenium is a web application testing software developed by Jason Huggins in 2004. It’s an open-source software that works on all three major platforms – Windows, Mac and Linux. Selenium supports a wide range of languages, including, but not limited to, Java, Python, Ruby, Perl, C# and PHP. The best part? Selenium enables you to test web applications with zero knowledge of any test scripting language.

This brings us to Selenium IDE. As mentioned above, the Selenium IDE is a Firefox plugin that makes it possible to record, edit and debug tests. It was developed independently of the Selenium project by Shinya Kasatani and was merged with the former in 2006. It was previously known as the Selenium Recorder; don’t be surprised if you stumble upon old tutorials mentioning it by that name!

How to Use Selenium IDE?

The Selenium IDE is currently available only on Firefox. Chrome users might want to look at alternatives like iMacros, Sahi and Scirocco.

First of all, install Selenium IDE in Firefox by grabbing a copy of the software from the Selenium HQ. It’ll install as a set of 5 extensions with separate formatters for Python, Ruby, etc. (language formatters are optional; install formatters only for languages you want to use). Once installed, restart Firefox. If you now go to the main Firefox options menu -> Add Ons -> Extensions, you should see Selenium IDE along with language formatters for Ruby, Python, C# and Java.

You are now ready to use Selenium. Below, we’ll learn how to record and play back actions using Selenium.

Using Selenium

To use the Selenium IDE, go to Firefox -> Web Developer -> Selenium IDE.

Alternatively, press CTRL + ALT + S to open the Selenium IDE window.

 

Let’s take a closer look at the Selenium IDE window:

• The left pane lists all the open test cases.
• The ‘Base URL’ shows the URL the test is being performed on.
• The ‘Table’ pane will show a list of actions recorded as part of the test. You can see how this works in the example below.
• The ‘Fast-Slow’ slider dictates how fast/slow playback for the recorded test should be.
• The ‘Play’ button plays back the test.
• The big red button at the rightmost edge is the ‘Record’ toggle switch. Switch it on to record interactions on any website.
• The bottom pane shows a log of actions and a reference list.

There are a number of other options – Selenium IDE is a fairly powerful tool, after all – but for now, we only need to be concerned with the options listed above.

New to software testing? Learn the basics of technical web testing in this course!

Creating a Simple Test in Selenium IDE

For the purpose of this tutorial, we will create a simple test that will enter a particular query into Google. In essence, this will be more like a macro than an actual ‘test’, but it will demonstrate the power of automated testing using Selenium IDE.

Step 1: Create a new test case by going to File -> New Test Case.

A new untitled test should show up in the test case pane to the left.

Step 2: We are now going to record our test. To do this, hit the red record switch to the right.

Now, perform the following actions in sequence:

1. Type in Google.com into your Firefox address bar:

2. On the Google.com homepage, search for any query. For this example, we used the query ‘automated testing.

3. Once the results page opens, stop the test by clicking the red toggle switch.

Step 3: Now that we’ve recorded the test, let’s play it back.

This is what your ‘Table’ pane should look like now:

Click on the ‘Play current test case’ button.

This will automatically open Google.com, type in ‘automated testing’ into the query field, and display the search results.

If you take a closer look at the two commands in the Table pane, you’ll see that you can not only change the command, but also alter the values associated with it.

For example, the first command is ‘open’. You can change this to anything else – Selenium IDE offers a huge list of built-in commands. You can also change the ‘Target’ url to anything that you like.

The next command is ‘type’. This basically instructs Selenium to type-in the desired query into the search bar. You can change the query to anything you want by changing the ‘value’.

For example, if you change it to ‘red and orange widgets’, Selenium IDE will automatically query ‘red and orange widgets’ into Google.

This is one of the most basic examples of what Selenium IDE can do. By combining different commands, you can make the IDE run complex tasks and test for bugs automatically.

Want to create more advanced tests? Learn Selenium 2 WebDriver to create powerful automated tests.

Using Selenium IDE Contextual Menu

Besides the Selenium IDE window, the plugin also installs a contextual menu into Firefox that can be accessed by pressing the right mouse button.

Let’s see an example of how it works:

Like the previous example, create a new test case and hit ‘record’. Then go to Google.com, type in a query (‘automated testing’) and wait for the search results page to load.

After the results page opens, right click on the main search field on Google. A contextual menu will pop up with a list of actions you can perform.

At the bottom of the menu, you’ll see a ‘verifyValue’ option. If you select this option, Selenium will make sure that there is always a value present in the search bar – a simple test.

You can also see a list of all available commands on the same menu. This will give you a huge list of commands to choose from like ‘verifyTitle’, ‘verifyValue’, ‘open’, ‘storeTitle’, etc.

Using these different options, you can create automated tests to check different elements in a web app. For this example, if you stop the recording and play back the test, Selenium IDE will first open Google.com, type in the desired query, and finally, verify that the query has been entered into the search bar.

Selenium IDE is a very powerful tool for making QA tests. You can combine different commands, use the contextual menu, and even create your own commands through Selenium.

To learn more about Selenium and automated testing, check out this course on web application testing with Selenium.