The Selenium IDE (Integrated Development Environment) is an open source record-and-playback tool for generating Selenium scripts, which is integrated with the Firefox web browser as an extension. It is a renowned web-based UI test automation tool that extracts any kind of locator from the web page. The locators can be either attribute-based or structure-based, and include ID, name, link, XPath, CSS, and DOM. The IDE has the entire Selenium Core, which allows the users to record, playback, edit, and debug tests manually in a browser. The user actions in the web page can be recorded and exported in any of the most popular languages, such as Java, C#, Ruby, and Python.

Selenium Builder is an alternative open source tool for the Selenium IDE to record and playback web applications. It is an extension of the Firefox web browser, which is similar to the Selenium IDE, but, it has some unique features that the Selenium IDE doesn't support. Selenium Builder is a standard tool from Sauce Labs that runs tests on Sauce Cloud from the Selenium Builder interface itself.

In this chapter, we will learn about:

The Selenium IDE is a Firefox extension to record and playback web-based applications. However, it does more than what a record-and-playback tool would do. Breakpoints allow the users to debug IDE commands step by step on runtime. The IDE has three different types of panes, namely the left pane, test case pane, and log / reference / UI-element / rollup pane.

Launch the Selenium IDE from the Firefox Tools menu, Tools | Selenium IDE. The IDE can also be opened using the Ctrl + Shift + S shortcut or by clicking on the Selenium icon in the top-right corner of the Firefox web browser. The Selenium icon is shown in the following screenshot:

A new, untitled test case will be created in Left Pane after launching the Selenium IDE. To start with a new test case, choose New Test Case from the File menu, that is, File | New Test Case, or make use of Ctrl + N, the Windows shortcut.

To start recording test scripts, click on the round, red icon from the playback control toolbar. By default, the record button will be active and the test scripts are recorded in Selenese, a domain-specific language that is similar to the HTML format. The playback control toolbar is shown in the following screenshot:

The Fast-Slow slider adjusts the test speed execution; the Play All button lets you run entire test cases as a test suite, where a test suite is a collection of test cases; and the Play button helps you to run the current test case. The Pause/Resume button pauses test execution for a while and allows the user to resume tests at their convenience.

The Test Case pane displays all the recorded steps with Command, Target, and Value. The Command column instructs the IDE about what to do. It comes with three different aspects, which are:

The Selenium IDE has a list of built-in commands that let you drive tests as expected. Adding user-defined commands to the Selenium IDE is quite feasible by extending the external JavaScript methods. A command can be any one of the preceding three types. In the IDE, these commands are easily editable and replaceable with alternative commands while generating scripts.

Action commands manipulate the application state through some kind of actions, can be either action or actionAndWait. Action commands that end with the suffix AndWait allow the page to load fully before starting to execute the next command.

A few of the Action command examples are open, type, typeAndWait, select, selectAndWait, check, checkAndWait, click, and clickAndWait.

Accessors detect the application state and store results in a variable; store, storeText, and storeValue are the commands that are used to store values. For example, in the following screenshot, search is a variable and prashanth sams is the search keyword. Later on, the stored value is retrieved and is used as a parameter for an action, ${search}. The discussion in this paragraph is encapsulated in this screenshot:

Assertions verify the application state by validating the expected result. It is available in three different modes, namely, assert, verify, and waitFor. Assert fails and aborts the test execution upon failure, verify fails and continues the test execution upon failure, and waitFor waits for a specific condition to occur and fails upon timeout. By default, the timeout is set to 30,000 milliseconds, 30 seconds. In the Selenium IDE, the timeout can be manually configured using the Options menu.

The Target field directs the IDE to locate elements, and the general syntax for Target is as follows:

locatorType = argument

An example for Target is as follows:

css=#gbqfq

The Log / Reference / UI-Element / Rollup pane is displayed at the bottom of the IDE. This is shown in the following screenshot:

This pane allows the user to see the log information, command reference, UI-Element, and Rollup, among others. On installing the Neustar plugin to the Selenium IDE, a separate tab called Neustar Script Uploader will be shown along with the other tabs. Neustar WPM (formerly called Browsermob) is a web performance management tool for web page monitoring and load testing.

The log captures all the IDE test execution steps one by one and is mainly used for debugging purposes. The Debug menu in the bottom pane contains a list of options, namely Info, Debug, Warn, and Error. It lets you filter the explicit status, warning, and error messages, and certainly reduces the verbosity level.

The Reference tab gives a detailed explanation of the IDE commands upon clicking on each row from the Test Case pane. In the case of user-defined commands, the Reference tab will not include any information. Rollup executes a group of commands in one step; it is reusable and can be used any number of times within the test case. Refer to Help | UI-Element Documentation for more details about UI-Element and Rollup.

While recording test scripts, the Selenium IDE provides UI-based options for every mouse right-click on elements on a browser web page. To achieve this, right-click on the web page and hover the mouse over Show All Available Commands. The following screenshot is the result of this action: