Getting Started with Selenium IDE (Installation and its Features) – Selenium Tutorial #2

Before moving ahead, let’s take a moment to look at the agenda of this tutorial. In this tutorial, we will learn all about Selenium IDE, starting from its installation to the details about each of its features. At the end of this tutorial, the reader is expected to be able to install Selenium IDE tool and play around with its features.

=> This is the 2nd tutorial in our free online Selenium training series. If you have not read the first Selenium tutorial in this series please get started from here: Free online Selenium Tutorial #1

Note: This is quite an extensive tutorial with lots of images so allow it to load completely. Also, click on an image or open in new window to enlarge images.

What You Will Learn:

Introduction to Selenium IDE

Selenium integrated development environment, acronym as Selenium IDE is an automated testing tool that is released as a Firefox plug-in. It is one of the simplest and easiest tools to install, learn and to go ahead with the creation of test scripts. The tool is laid on a record and playback fundamental and also allows editing of the recorded scripts.

The most impressive aspect of using selenium IDE is that the user is not required to possess any prior programming knowledge. The minimum that the user needs is the little acquaintances with HTML, DOMS and JavaScript to create numerous test scripts using this tool.

Being a Firefox plug-in, Selenium IDE supports only Firefox, thus the created test scripts could be executed only on Firefox. A few more loopholes make this tool inappropriate to be used for complex test scripts. Thus, other tools like Selenium RC, WebDriver comes into the picture.

So, before gripping on to the details of Selenium IDE, let’s have a look at its installation first.

Selenium IDE Download and Installation

For the ease of understanding, I have bifurcated the entire IDE installation process in the following chunks/steps.

Before taking off, there is one thing that needs to be in place prior to the installation; Mozilla Firefox. You can download it from here => Mozilla Firefox download.

Step #1: Selenium IDE download: Open the browser (Firefox) and enter the URL http://seleniumhq.org/.This would open the official Selenium head quarter website. Navigate to the “Download” page; this page embodies all the latest releases of all the selenium components. Refer the following figure.

Step #2: Move under the selenium IDE head and click on the link present. This link represents the latest version of the tool in the repository. Refer the following figure.

Step #3: As soon as we click on the above link, a security alert box would appear so as to safeguard our system against potential risks. As we are downloading the plug-in from the authentic website, thus click on the “Allow” button.

Step #4: Now Firefox downloads the plug-in in the backdrop. As soon as the process completes, software installation window appears. Now click on the “Install Now” button.

Step #5: After the installation is completed, a pop up window appears asking to re-start the Firefox. Click on the “Restart Now” button to reflect the Selenium IDE installation.

Step #6: Once the Firefox is booted and started again, we can see selenium IDE indexed under menu bar -> Web Developer -> Selenium IDE.

Step #7: As soon as we open Selenium IDE, the Selenium IDE window appears.

Features of Selenium IDE

Let’s have a look at each of the feature in detail.

(Note – Click to enlarge image if you are not able to read the image text – this is applicable for all images)

#1. Menu Bar

Menu bar is positioned at the upper most of the Selenium IDE window. The menu bar is typically comprised of five modules.

A) File Menu 

File Menu is very much analogous to the file menu belonging to any other application. It allows user to:

The Selenium IDE test cases can be saved into following format:

The Selenium IDE test cases can be exported into following formats/programming languages.

Notice that with the forthcoming newer versions of Selenium IDE, the support to formats may expand.

B) Edit Menu

Edit menu provides options like Undo, Redo, Cut, Copy, Paste, Delete and Select All which are routinely present in any other edit menu. Amongst them, noteworthy are:

Insert New Command

The new command would be inserted above the selected command/test step.

Now the user can insert the actual command action, target and value.

Insert New Comment

In the same way we can insert comments.

The purple color indicates that the text is representing a comment.

C) Actions Menu

Actions Menu equips the user with the options like:

D) Options Menu

Options menu privileges the user to set and practice various settings provided by the Selenium IDE. Options menu is recommended as one of the most important and advantageous menu of the tool.

Options Menu is primarily comprised of the following four components which can be sub-divided into the following:

Options

Selenium IDE Options dialog box

To launch Selenium IDE Options dialog box, follow the steps:

  1. Click on Options Menu
  2. Click on the Options

A Selenium IDE Options dialog box appears. Refer the following figure.

Selenium IDE Options dialog box aids the user to play with the general settings, available formats, available plug-ins and available locators types and their builders.

Let’s have a look at the few important ones.

General Settings

Formats



Formats tab displays all the available formats with selenium IDE. User is levied with the choice to enable and disable any of the formats. Refer the following figure.

Selenium IDE Plugins

Plug-ins tab displays the supported Firefox plug-ins installed on our instance of Selenium IDE. There are a number of plug-ins available to cater different needs, thus we can install these add-ons like we do other plug-ins. One of the recently introduced plug-in is “File Logging”. In the end of this tutorial, we will witness how to install and use this plug-in.

With the standard distribution, Selenium IDE comes with a cluster of following plug-ins:

These formatters are responsible to convert the HTML test cases into the desired programming formats.

Locator Builders

Locator builders allow us to prioritize the order of locator types that are generated while recording the user actions. Locators are the set of standards by which we uniquely identify a web element on a web page.

Formats

Formats option allows user to convert the Selenium IDE test case (selenese commands) into desired format.

E) Help Menu

As Selenium has a wide community and user base, thus various documentations, release notes, guides etc. are handily available. Thus, the help menu lists down official documentation and release notes to help the user.

#2. Base URL Bar

Base URL bar is principally same as that of an address bar. It remembers the previously visited websites so that the navigation becomes easy later on.

Now, whenever the user uses “open” command of Selenium IDE without a target value, the base URL would be launched on to the browser.

Accessing relative paths

To access relative paths, user simply needs to enter a target value like “/download” along with the “open” command. Thus, the base URL appended with “/downloads” (http://docs.seleniumhq.org/resources) would be launched on to the browser. The same is evident in the above depiction.

#3. Toolbar

Toolbar provides us varied options pertinent to the recording and execution of the test case.

#4. Editor

Editor is a section where IDE records a test case. Each and every user action is recorded in the editor in the same order in which they are performed.

The editor in IDE has two views, namely:

1) Table View

It is the default view provided by Selenium IDE. The test case is represented in the tabular format. Each user action in the table view is a consolidation of “Command”, “Target” and “Value” where command, target and value refers to user action, web element with the unique identification and test data correspondingly. Besides recording it also allows user to insert, create and edit new Selenese commands with the help of the editor form present in the bottom.

2) Source View

The test case is represented in the HTML format. Each test step is considered be a row <tr> which is a combination of command, target and value in the separate columns <td>. Like any HTML document, more rows and columns can be added to correspond to each Selenese command.

Editor Form lets the user to type any command and the suggestions for the related command would be populated automatically. Select button lets the user to select any web element and its locator would be fetched automatically into the target field. Find button lets the user find the web element on the web page against a defined target. Value is the test input data entered into the targets with which we want to test the scenario.

#5. Test case pane

At the instance we open Selenium IDE interface, we see a left container titled “Test case” containing an untitled test case. Thus, this left container is entitled as Test case pane.

Test case pane contains all the test cases that are recorded by IDE. The tool has a capability of opening more than one test case at the same time under test case pane and the user can easily shuffle between the test cases. The test steps of these test cases are organized in the editor section.

Selenium IDE has a color coding ingredient for reporting purpose. After the execution, the test case in marked either in “red” or “green” color.

#6. Log Pane

Log pane gives the insight about current execution in the form of messages along with the log level in the real time. Thus, log messages enable a user to debug the issues in case of test case execution failures.

The printing methods / log levels used for generating logs are:

Logs can be filtered with the help of a drop down located at the top-right corner of the footer beside the clear button. Clear button erases all the log messages generated in the current or previous run.

Generating Logs in an external medium

Recently introduced “File Logging” plug-in enables the user to save log messages into an external file. File Logging can be plugged in to IDE like any other plug-in. Upon installation, it can be found as a tab named “File Logging” in the footer beside the Clear button.

Reference Pane

Reference Pane gives the brief description about the currently selected Selenese command along with its argument details.

UI-Element Pane

UI – Element Pane allows Selenium user to use JavaScript Object Notation acronym as JSON to access the page elements. More on this can be found in UI-Element Documentation under Help Menu.

Rollup Pane

Rollup Pane allows the user to roll up or combine multiple test steps to constitute a single command termed as “rollup”. The rollup in turn can be called multiple times across the test case.

Conclusion

Through this tutorial, our objective was to make you familiar and accustomed with the basic terminologies and nomenclatures of Selenium IDE. We also presented a detailed study on all the features of Selenium IDE.

Here are the cruxes of this tutorial:

Next Tutorial #3: Now that we are acquainted and comfortable with Selenium IDE and its features, in the next tutorial we would practice these features by creating our own test script using Selenium IDE.

A remark for the readers: While our next tutorial of the Selenium series is in the processing mode, install the tool and the required utilities to get started. Experience the features by playing around with the tool till we meet next with the next tutorial on “My first Selenium IDE script”.

Stay tuned till then and share your views, comments and knowledge to help us groom. Also let us know if you find anything that we missed out so that we can include them in the subsequent tutorials.

Finally, if you like this tutorial please consider sharing it with friends and on social media sites.