How to Use Selenium IDE in Firefox

Since Selenium IDE is the first component that we had seen in components of Selenium, we will learn how to use Selenium IDE in Firefox here first.

Probably the simplest component in the entire Selenium Suite, learning Selenium IDE will be a piece of cake. There is this record and playback functionality available herein that is very similar to QTP. All you need to do is install an addon and that’s it.

As it already says loud and clear, you need Firefox for it. So the first step would be to download the Mozilla Firefox browser if you don’t already have it.

You can do so from here:

https://www.mozilla.org/en-US/firefox/new/

It is recommended you download a little older version of Firefox. The latest ones aren’t working with Selenium IDE it seems.

I have downloaded 34 to be on the safe side. Once you have downloaded it is time to follow the steps on how to use Selenium IDE in Firefox.

Steps on How to Install Selenium IDE in Firefox

In order to help you learn how to use selenium IDE in Firefox, it is first important to learn how to install Selenium IDE in Firefox. I have made you a step by step learning program for the same. Keep walking in my footsteps and you will be fine.

Step 1: Open Firefox then navigate to the following link:

https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/

In case you are facing compatibility issues, downgrade your Firefox a bit.

Step 2: Click on Add to Firefox. Wait till the extension is added. When it is downloaded click on Install.

Step 3: The extension will be added to your extensions list. You might need to restart the browser. Click on Restart Now when prompted. You can go and check the status of the installed Selenium IDE by navigating to Tools > Add-ons and clicking on Extensions. You should see Selenium IDE slapped in there like this:

Launching Selenium IDE

Next step is to launch the Selenium IDE.

Step 4: You can do so by simply clicking on the Selenium IDE button that is being shown on the top right-hand side of your browser.

If you can’t find the symbol there, you can navigate to the menu option then select Developer > Selenium IDE:

Another alternative, a better shortcut is to just press the Ctrl + Alt + S button on your keyboard and the dialog box for Selenium IDE will open. It will look something like this:

NOTE: I am using version 2.9.1, your version could be different.

Install Firebug Addon for Firefox

The next step is to install Firebug addon for firefox. Firebug is nothing but an add-on that we are going to use identify and inspect HTML elements on any page. With the names of the elements available to work upon, using Selenese commands becomes really easy.

Step 5: Go to the Firebug download page by using your Firefox browser. Here’s the link you should be navigating to:

https://addons.mozilla.org/en-US/firefox/addon/firebug/

When you open the above mentioned link this is the page you will get:

Step 6: Click on the Add to Firefox button.

You will get a Software installation dialog box flaring the “Install Now” option. Click on Install.

The add on will be installed and you will get a message for it. You don’t need to restart the browser this time around.

Launching Firebug

To confirm if Firebug addon is installed on your browser you will see a small insect symbol on the top right-hand corner of your browser.

If you click that button you can open Firebug.

Another alternative is to press the F12 button on your keyboard.

Here’s what will be opened at the bottom section of your browser:

Alternative to Firebug: Firefox DevTools

That was the old way actually. Firebug is deprecated now. We have an alternative called Firefox DevTools that comes built in with every Firefox browser.

You can access that by simply pressing Ctrl + Shift + I on your browser. Doing so will open a similar window at the bottom side:

However, it is recommended you use Firebug add-on when you need deal with XPath of a WebElement. Using Firebug you can directly copy XPath.

You can choose to convert Selenese language to your preferred language. Yes, there’s a plugin available for that too. You just type Selenium <language> formatter in the Add-ons dialog (by navigating to Tools > Add-on):

Install the concerned add-on and you will have your language integrated. You don’t have to speak Selenese then!

How to Install User Extensions in Selenium IDE

To facilitate advanced capabilities Selenium also provides User Extensions which are in the form of Javascript files. In order to install these user extensions you need to follow the following steps:

Step 1: Open Selenium IDE by pressing the Selenium IDE button or by pressing Alt + Ctrl + S. By now you should know.

Step 2: Click on  Options > Options…

Step 3: A Selenium IDE options box will open up. Next to the Selenium Core Extensions textbox there would be a Browse button. Click on that and provide the concerned user extension (must be a .js format file).

In a similar fashion, you can provide Selenium IDE extensions in the textbox field that immediately follows the Selenium Core Extensions textbox.

NOTE: You can find tons of User Extensions on Selenium’s download page.

Now that we have successfully installed Selenium IDE plugins and required addons on Mozilla Firefox IDE it is time to learn how to use Selenium IDE in Firefox.

How to Use Selenium IDE in Firefox

If you haven’t opened Selenium IDE already on your Firefox browser, just open it. (Shortcut is Alt + Ctrl + S)

As you can see from the opened Selenium IDE window, and my reddened circles of imperfection, there are three main areas where stuff takes place.

1. The first one is the Test case pane. Here your test cases will be listed. Green implies Passed while Red implies Failed.
2. The second window is known as the Editor. It has Table and Source view columns. You can create steps by typing the command in the command box available at the bottom. Target associates with parameter while Value is nothing but the value you specify for that parameter.
3. The last window is the Log Pane where runtime messages are shown. All info warnings and errors encountered while testing gets shown here just as was the case with Eclipse IDE. You can also switch to Reference, UI-Element and Rollup anytime to see the description, define element mappings or execute a group of commands in a single go.

Also, there is a red button on the right-hand side on the Selenium IDE window. It is a recording button that helps in recording your test cases. Like that was hard to figure out!

Things will become clearer when you actually start using these windows and buttons for testing stuff.

So far so good?

Time to start creating scripts! Yipee!

Here’s how you can make scripts using the recording feature provided by Selenium IDE.

Here’s how you can create a script manually.

Now that you have learnt how to use Selenium IDE in Firefox it is time to try this out yourself. Go ahead and make your own test scripts. Happy experimenting!