02. Selenium IDE
Srinivas Prasad K T
Engineering Manager @ Decathlon Technology || Ex Harman || Ex E2Open || Oracle Java? || Spring Boot? || WDIO? || Playwright? || Java Script & Type Script? || Scrum? || Gatling? || AI? || Tricentis Tosca? || ACCELQ?
Selenium IDE
Selenium IDE Download and Installation
What you need
Step 1:?Selenium IDE download:?
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 to the following figure.
Step 3: As soon as you click on “from addons.mozilla.org”, We will navigate to the following page.
Step 4: click on the “Add to fire fox” button.
Step 5: Once you click on the “add to Firefox” button, The following page will be displayed.
Step 6: Click on the install button.
Step 7: IDE will get installed and ask to restart the browser
Step 8: Firefox will restart?
Step 9: Click on the tools on the menu bar, At the button you can able to see the Selenium IDE
Step 10: Click on the Selenium IDE, Selenium IDE window will display.?
Features of Selenium IDE
Let’s have a look at each of the features in detail.
#1. Menu Bar
The menu bar is positioned at the uppermost 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 users to:
The Selenium IDE test cases can be saved in the following format:
The Selenium IDE test cases can be exported into the following formats/programming languages.
Notice that with the forthcoming newer versions of Selenium IDE, the support for formats may expand.
B) Edit Menu
The 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
The options menu privileges the user to set and practice various settings provided by the Selenium IDE. The options menu is recommended as one of the most important and advantageous menus 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 the Selenium IDE Options dialog box, follow the steps:
A Selenium IDE Options dialog box appears. Refer to the following figure.
Selenium IDE Options dialog box aids the user to play with the general settings, available formats, available plug-ins, and available locator types and their builders.
Let’s have a look at a few important ones.
General Settings
Formats
The formats tab displays all the available formats with Selenium IDE. The user is levied with the choice to enable and disable any of the formats. Refer to the following figure.
Selenium IDE Plugins
The 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 to different needs, thus we can install these add-ons like we do other plug-ins. One of the recently introduced plug-ins is “File Logging”. At 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 the following plug-ins:
These formatters are responsible for converting 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
The formats option allows the user to convert the Selenium IDE test case (selenese commands) into the desired format.
E) Help Menu
As Selenium has a wide community and user base, various documentations, release notes, guides, etc. are handily available. Thus, the help menu lists official documentation and release notes to help the user.
#2. Base URL Bar
The base URL bar is principally the 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 the “open” command of Selenium IDE without a target value, the base URL will be launched onto the browser.
Accessing relative paths
To access relative paths, the user simply needs to enter a target value like “/download” along with the “open” command. Thus, the base URL appended with “/downloads” (https://docs.seleniumhq.org/resources) would be launched onto 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.
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 openthe Selenium IDE interface, we see a left container titled “Test case” containing an untitled test case. Thus, this left container is entitled as a Test case pane.
The test case pane contains all the test cases that are recorded by IDE. The tool has the capability of opening more than one test case at the same time under the 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 purposes. After the execution, the test case is 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:
Creating First Selenium IDE Script
So let us now create our first script using Selenium IDE.
The entire script creation process can be classified into 3 chunks:
Process #1:?Recording?– Selenium IDE aids the user to record user interactions with the browser and thus the recorded actions as a whole are termed as Selenium IDE script.
Process #2:?Playing back?– In this section, we execute the recorded script so as to verify and monitor its stability and success rate.
Process #3:?Saving?– Once we have recorded a stable script, we may want to save it for future runs and regressions.
Let us now see their implementation.
Process #1: Recording a test script
Scenario
Step 1 –?Launch the Firefox and open Selenium IDE from the menu bar.
领英推荐
Step 2 –?Enter the address of application under test (“https://accounts.google.com”) inside the Base URL textbox.
Step 3 –?By default, the Record button is in ON state. Remember to tune it ON if it is in OFF state so as to enable the recording mode.
Step 4 –?Open the application under test (https://accounts.google.com) in the Firefox.
Step 5 –?Verify if the application title is correct. To do so, right click anywhere on the page except the hyperlinks or images. The right click opens the Selenium IDE context menu listing few of the commands. To get an entire list, select “Show Available Commands” option. This will open another menu containing rest of the available and applicable commands. Select “assertTitle Sign in – Google Accounts” option to verify the page title.
(Click to view enlarged image)
As soon as we click on “assertTitle Sign in – Google Accounts” option, a test step would be included /appended in the Selenium IDE editor.
Step 6 –?Enter a valid username in the “Email” Textbox of Gmail.
Step 7 –?Enter a valid password in the “Password” Textbox of Gmail.
The simulation of the same user actions can be seen in the Selenium IDE test editor.
Notice that for the ease of understanding, I have already created test credentials. I would strictly advise the readers to create their own credentials instead of using these.
Step 8 –?Click on the “Sign in” button to complete the login process.
User should be re-directed to the home page provided the credentials entered are correct.
Step 9 –?At the end, we would end the recording session by tuning the record button into OFF state. Below is the recorded script.
Process #2: Playing back / executing a test script
Now that we have created our first Selenium IDE script, we would want to execute it to see if the script is stable enough. Click on the playback button to execute the script.
Post execution, all the test steps would be color coded in green for the successful run. The same would be evitable from the test case pane.
For unsuccessful execution or test case failure, the failed test step would be highlighted in red. And the test case pane would mark the test case execution as failure.
Process #3: Saving a test script
Once, we have played back the script, now it’s time to save the created test script.
Step 1 –?To save the test script, Click on the File menu and select “Save Test Case” option.
Step 2 –?The system will prompt us to browse or enter the desired location to save our test case and to provide the test script name. Furnish the test name as “Gmail_Login” and click on the “Save” button.
The test script can be found at the location provided in the above step. Notice that the test script is saved in HTML format.
Using Common features of Selenium IDE
Setting Execution speed
While testing web applications, we come across several scenarios where an action performed may trigger a page load. Thus we must be cognizant enough while dealing such scenarios.
So to avoid failures while playing back these test scenarios, we can set the execution speed to be minimal. Refer the following figure for the same.
Using “Execute this command” option
Selenium IDE allows the user to execute a single test step within the entire test script without executing the entire test script. “Execute this command” is the option which makes this obtainable.
“Execute this command” option can be used at times when we want to debug/see the behavior of a particular test step.
“Execute this command” option can be used in the following four ways:
#1.?Using Actions tab from the Menu bar
#2.?Using short cut key (“X”)
#3.?Right click the test step and select “Execute this command”
#4.?Double click the test step
In all the above cases, user is expected to select the test step which he / she want to execute.
Steps to be followed:
Step 1 –?Launch the web browser and open the target URL (“https://accounts.google.com”), Select the test step that we desire to execute. Remember to open correct web page to mitigate the chances of failure.
Step 2 –?Press “X” to execute the selected test step. Alternatively, one can use other ways too.
Step 3 –?Notice that the selected test step is executed. The test step would be color coded in green for success or red for failure. At the same time, the test step would be simulated into an action on the web browser.
Note that the user is responsible to bring the script before executing the test step and Firefox in context. There is a probability of failure if the user has not opened the legitimate web page.
Using Start point
Selenium IDE allows the user to specify a start point within a test script. The start point points to the test step from where we wish to start the test script execution.
Start point can be used at times when we do not desire to execute the entire test script starting from the beginning rather we customize the script to execute from a certain step.
Start point can be set and clear in the following three ways:
#1.?Using Actions tab from the Menu bar
#2.?Using short cut key (“S”)
#3.?Right click the test step and select “Set/Clear Start Point”. Menu similar to above image will be displayed.
In all the above cases, user is expected to select the test step from where he wants to start the execution prior to setting start point.
As soon as the user has marked the test step to indicate the start point, an icon gets affixed to it.
Now whenever we execute the test script, it execution would be started from the start point i.e. fourth line (type | id=Passwd | TestSelenium) of the test script.
Notes
Using Break point
Selenium IDE allows the user to specify break points within a test script. The break points indicate Selenium IDE where to pause the test script.
------------
Break points can be used at times when we desire to break the execution in smaller logical chunks to witness the execution trends.
Break point can be set and clear in the following three ways:
As soon as the user has marked the test step to indicate the break point, an icon gets affixed to it.
Now whenever we execute the test script, the execution pauses at the break point i.e. fourth line (type | id=Passwd | TestSelenium) of the test script.
Apply multiple breakpoints
Selenium IDE allows user to apply multiple breakpoints in a single test script. Once the first section of the test script is executed, the script pauses as and when the breakpoint is reached. To execute the subsequent test steps, user is required to execute each of the test steps explicitly.
In the above test script, the execution pauses at the line “assertTitle | Sign in – Google Accounts”. After explicitly executing this test step, the control moves to the next test step in sequence “type | id=Email | [email protected]”. Thus, user needs to explicitly execute this test step. The similar trend is followed for rest of the subsequent steps.
Thus, this feature lets the user to spend more time executing each step and reviewing the outcomes of the previously executed test step.
Notes
Using Find Button
One of the most crucial aspects of Selenium IDE test scripts is to find and locate web elements within a web page. At times, there are web elements which have analogous properties associated with them, thus making it challenging for a user to identify a particular web element uniquely.
To address this issue, Selenium IDE provides Find button. The Find Button is used to ascertain that locator value provided in the Target test box is indeed correct and identifies the designated web element on the GUI.
Let us consider the above created Selenium IDE test script. Select any command and notice the target text box. Click on the Find button present just beside the Target text box.
Notice that the corresponding web element would be highlighted in yellow with a fluorescent green border around it. If no or wrong web element is highlighted, then the user is required to rectify the issue and would need to impose some other locator value.
Thus, this procedure makes the user assured about the target value being used and that it corresponds to the correct web element on the GUI.
Using Other Formats
Converting Selenium IDE test scripts to Other Programming Languages
Selenium IDE supports conversion test scripts into set of programming languages from a default type (HTML). The converted test scripts cannot be played back using Selenium IDE until and unless it is reverted back to HTML. Thus the conversion is beneficial and constructive only when we are executing it from other tools of Selenium Suite.
Step 1 –?Click on the options tab under the menu bar and select the programming language format under format option in order to convert the test script into our desired format.
Step 2?– As soon as we select our Desired Programming language format (“Java / JUnit4 / WebDriver” in our case), a prompt box appears which says “Changing format is now marked experimental! If you continue, recording and playback may not work, your changes may be lost and you may have to copy and paste the test in a text editor to save. It is better to make a copy of your test cases before you continue. Do you still want to proceed?” Click “OK” to continue.
Thus, the above converted code can be executed by using WebDriver.
Mark that editing or modifying Selenium IDE test scripts from Source View is not advisable. If done so, the tool might introduce several repercussions. Several known bugs are already associated with it.
Selenium IDE Commands
Each Selenium IDE test step can chiefly be split into the following three components:
Types of Selenium IDE commands
There are three flavors of Selenium IDE commands. Each of the test step in Selenium IDE falls under any of the following category.
Actions
Actions are those commands which interact directly with the application by either altering its state or by pouring some test data.
For Example, “type” command lets the user to interact directly with the web elements like text box. It allows them to enter a specific value in the text box and as when the value is entered; it is showed on the UI as well.
Another example is “click” command. “click” command lets the user to manipulate with the state of the application.
In case of failure of an action type command, the test script execution halts and rest of the test steps would not be executed.
Accessors
Accessors are those commands which allows user to store certain values to a user defined variable. These stored values can be later on used to create assertions and verifications.
For example, “storeAllLinks” reads and stores all the hyperlinks available within a web page into a user defined variable. Remember the variable is of array type if there are multiple values to store.
Assertions
Assertions are very similar to Accessors as they do not interact with the application directly. Assertions are used to verify the current state of the application with an expected state.
Forms of Assertions:
#1. assert?– the “assert” command makes sure that the test execution is terminated in case of failure.
#2. verify?– the “verify” command lets the Selenium IDE to carry on with the test script execution even if the verification is failed.
#3. waitFor?– the “waitFor” command waits for a certain condition to be met before executing the next test step. The conditions are like page to be loaded, element to be present. It allows the test execution to proceed even if the condition is not met within the stipulated waiting period.
Commonly used Selenium IDE commands
Command
Description
#Argu ments
open
Opens a specified URL in the browser.
1
assertTitle, VerifyTitle
Returns the current page title and compares it with the specified title
1
assertElementPresent, verifyElementPresent
Verify / Asserts the presence of an element on a web page.
1
assertTextPresent, verifyTextPresent
Verify / Asserts the presence of a text within the web page.
1
type, typeKeys,? sendKeys
Enters a value (String) in the specified web element.
2
Click, clickAt,? clickAndWait
Clicks on a specified web element within a web page.
1
waitForPageToLoad
Sleeps the execution and waits until the page is loaded completely.
1
waitForElement Present
Sleeps the execution and waits until the specified element is present
1
chooseOkOnNext Confirmation,? chooseCancelOn NextConfirmation
Click on ”OK” or “Cancel” button when next confirmation box appears.
0
Conclusion
In this tutorial, we tried to make you acquainted with the creation of Selenium IDE scripts. We also briefed you about the usage of various Selenium features.
Here are the cruxes of this article.