Unit II

Introduction to
Selenium IDE
Contents
► Installation and Introduction to IDE
► Creating first script using record and playback
► Installation of Inspector Tools and its Uses.
► Generating Scripts using different Web Elements
► Handling Wait Commands
► Handling Validations Commands
► Handling Store Commands
► Limitations of IDE
 Selenium Integrated Development Environment
►
(IDE)
Selenium IDE (Integrated Development Environment) is an
open source web automation testing tool under the
Selenium Suite. Unlike Selenium WebDriver and RC, it does
not require any programming logic to write its test scripts
rather you can simply record your interactions with the
browser to create test cases. Subsequently, you can use
the playback option to re-run the test cases.
► Perhaps, creating test cases on Selenium IDE does not
require any programming language but when you get to
use selenese commands like runScript, a little knowledge
prior to JavaScript would prove beneficial for you to
understand the concepts more clearly. You can also refer
our JavaScript tutorial provided under the URL:
https://www.javatpoint.com/javascript-tutorial
► Note: Selenium IDE is available only as Mozilla Firefox and Chrome
plug-in, which means you can't record your test cases on browsers
other than Firefox and Chrome. The recorded test scripts can also
be exported to programming languages like C#, Java, Ruby or
Python.
 Selenium IDE-Installation
► Since, Selenium IDE is available only as Firefox and Chrome plug-in, we assume that you
have already installed Mozilla Firefox browser in your system. However, you can download
the latest version of Firefox through their official website provided under the link given
below.
► Download Firefox Browser — Fast, Private & Free — from Mozilla
► Selenium IDE Download and Install
• Launch Mozilla Firefox browser.
• Open URL https://addons.mozilla.org/en-us/firefox/addon/selenium-ide/ It will redirect
you to the official add-on page of Firefox.
• Click on "Add to Firefox" button.
• A pop-up dialog box will be appeared asking you to add Selenium IDE as extension to
your Firefox browser.
• Click on "Add" button.

►
 Selenium IDE-Features
► Selenium IDE is divided into different components, each having their own
features and functionalities. We have categorized seven different
components of Selenium IDE, which includes:
1. Menu Bar
2. Tool Bar
3. Address Bar
4. Test Case Pane
5. Test Script Editor Box
6. Start/Stop Recording Button
7. Log, Reference Pane
► 1. Menu Bar : Menu bar is positioned at the top most portion of the Selenium IDE
interface. The most commonly used modules of menu bar include:
• Project Name
It allows you to rename your entire project.
• Open Project
It allows you to load any existing project from your personal drives.
• Save Project
It allows you to save the entire project you are currently working on.
► 2. Tool Bar
► The Tool bar contains modules for controlling the execution of your test cases. In
addition, it gives you a step feature for debugging you test cases. The most
commonly used modules of Tool Bar menu include:
• Speed Control Option
It allows you to control the execution speed of your test cases.
• Step Feature
It allows you to "step" through a test case by running it one command at a time.
Use for debugging test cases.
• Run Tests
It allows you to run the currently selected test. When only a single test is loaded
"Run Test" button and "Run all" button have the same effect.
• Run All
It allows you to run the entire test suite when a test suite with multiple test cases
is loaded.
► 3. Address Bar: This module provides you a dropdown menu that remembers all
previous values for base URL. In simple words, the base URL address bar remembers
the previously visited websites so that the navigation becomes easy later on.
► 4. Test Case Pane
► This module contains all the test cases that are recorded by IDE. In simple words, it
provides the list of all recorded test cases at the same time under the test case pane
so that user could easily shuffle between the test cases.

At the bottom portion of the Test Case Pane, you can see the test execution result
summary which includes the pass/fail status of various test cases.
► 5. Test Script Editor Box
► Test Script Editor Box displays all of the test scripts and
user interactions that were recorded by the IDE. Each user
interaction is displayed in the same order in which they are
performed. The Editor box is divided into three columns:
Command, Target and Value.
► Command:
Command can be considered as the actual operation/action
that is performed on the browser elements. For instance, if
you are opening a new URL, the command will be 'open'; if
you are clicking on a link or a button on the web page, then
the command will be 'clicked'.
► Target:
Target specifies the web element on which the operation has
to be performed along with a locator attribute. For instance,
if you are clicking on a button called javaTpoint, then the
target link will be 'javaTpoint’.
► Value:
Value is treated as an optional field and can be used when
we need to send some actual parameters. For instance, if
you are entering the email address or password in a
textbox, then the value will contain the actual credentials.
► 6. Start/Stop Recording Button
► Record button records all of the user actions with the browser.
► 7. Log, Reference Pane
► The Log Pane displays the runtime messages during execution. It provides
real-time updates of the actions performed by the IDE. It can be
categorized into four types: info, error, debug and warn.
► The reference Pane displays the complete detail of the currently selected
selenese command in the editor.
 What are the inspector tools?
► These set of tools, which are included now in all major modern browsers, give you the keys to find out what’s
going on with the page in the HTML, CSS, JavaScript and more. And they’re incredibly powerful.
► It started out with Firebug back in 2005 which added the ability for developers to check out the document
object model, see the CSS styling for specific elements and check out the console for JavaScript output.
► Today, this tool is common place in every major modern browser. It’s a must-use tool for any web
developer.
► There are two main ways to open the Inspector:
• Choose Tools > Web Developer > Inspector from the Menu Bar or the equivalent keyboard shortcut.
• Right-click an element on a web page and select Inspect Element.
 Firefox DevTools in Firefox
► Firefox DevTools is a Firefox feature that we will use to inspect the HTML
elements of the web application under test. It will provide us the name of
the element that our Selenese command would act upon.
► Step 1) Right click anywhere on the page and select Inspect Element. You
can also use shortcut Cntrl + Shift + I
► Step 2) You will see the Interface
► Step 3) You can right click on an element and chose CSS or XPath. This is
useful in object identification
 Selenium IDE Commands
► Each Selenium IDE test step can chiefly be split into the following three components:
• Command
• Target
• Value
► Types of Selenium IDE commands
► There are three flavors of Selenium IDE commands. Each of the test steps in Selenium IDE falls under any of the following categories.
• Actions
• Accessors
• Assertions
► 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 interact directly with the web elements like a 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 the “click” command. The “click” command lets the user 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 allow the 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 carry on with the test script execution even if the verification is failed.
► #3. wait for – the “waitFor” command waits for a certain condition to be met before executing the next test step. The conditions are like the 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
open
Description
Opens a specified URL in the browser.
#Arguments
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, Enters a value (String) in the specified web element. 2

waitForElement Sleeps the execution and waits until the specified element is present 1
Present

chooseOkOnNext Click on ”OK” or “Cancel” button when next confirmation box appears. 0
Confirmation,
chooseCancelOn
NextConfirmation
How to use CSS Selector to locate web elements in Selenium
scripts
► What is a CSS Selector?
► CSS Selector combines an element selector and a selector value that can identify particular elements on a web page. The
composite of an element selector and selector value is known as Selector Pattern. Like XPath, CSS selector can be used
to locate web elements without ID, class, or Name.
► Types of CSS Selectors (with examples)
► There are 5 types of CSS Selectors in Selenium tests-
1. ID
2. Class
3. Attribute
4. Sub-String
5. Inner String
1. CSS Selector:ID
► In this example, the script will access the Email text box on the login form at Gmail.com
► The text box carries an ID attribute with the value “Email”. In this case, the ID attribute and its value are utilized to
create a CSS selector that allows access to the text box.
► How to create the Selenium CSS Selector for the web element
► Locate the web element – Email textbox. The HTML tag here is “input” and the value of the ID attribute is “Email”.
Combined, they refer to the Email textbox. This is the data required to create the CSS selector.
► Verify locator value
► Type “css=input#Email”(locator value) in Selenium IDE. Click on the Find button. The Email
text box is highlighted, verifying the locator value.
► Syntax
► css=<HTML tag><#><Value of ID attribute>
• HTML tag – It is the tag which is used to denote the web element which we want to access.
• # – The hash sign is used to symbolize ID attribute. It is mandatory to use hash sign if ID
attribute is being used to create CSS Selector.
• Value of ID attribute – It is the value of an ID attribute which is being accessed.
• The value of ID is always preceded by a hash sign.
► Note: Also applicable for other types of CSS Selectors
• While specifying CSS Selector in the target text box of Selenium IDE, always remember to
prefix it with “css=”.
• The sequence of the above artifacts is inalterable.
• If two or more web elements have the same HTML tag and attribute value, the first element
marked in the page source will be identified.
2. CSS Selector: Class
► The “Stay signed in” checkbox has a Class attribute whose value is
defined as “remember”. Thus Class attribute and its value can be used to
create a CSS Selector to access the designated web element.
► Locating an element using Class as a CSS Selector is very much similar
to using ID, the lone difference lies in their syntax formation.
► Creating a CSS Selector for web element
► Step 1: Locate/inspect the web element (“Stay signed in” checkbox in
our case) and notice that the HTML tag is “label” and value of ID
attribute is “remember” and both of them collectively make a reference
to the “Stay signed in checkbox”.
► Verify the locator value
► Step 1: Type “css=label.remember” i.e. the locator value in the target
box in the Selenium IDE and click on the Find Button. Notice that the
“Stay signed in” checkbox would be highlighted.
► Syntax
► css=<HTML tag><.><Value of Class attribute>
• . – The dot sign is used to symbolize Class attribute. It is mandatory to
use dot sign if a Class attribute is being used to create a CSS Selector.
• The value of Class is always preceded by a dot sign.
3) CSS Selector: Attribute
► In this sample, we would access the “Sign in” button present below the login
form at gmail.com.
► The “Sign in” button has a type attribute whose value is defined as “submit”.
Thus type attribute and its value can be used to create a CSS Selector to
access the designated web element.
► Creating a CSS Selector for web element
► Step 1: Locate/inspect the web element (“Sign in” button in our case) and
notice that the HTML tag is “input”, the attribute is type and value of type
attribute are “submit” and all of them together make a reference to the “Sign
in” button.
► Verify the locator value
► Step 1: Type “css=input[type=’submit’]” i.e. the locator value in the target
box in the Selenium IDE and click on the Find Button. Notice that the “Sign
in” button would be highlighted.
► Syntax
► css=<HTML tag><[attribute=Value of attribute]>
• Attribute – It is the attribute we want to use to create CSS Selector. It can
value, type, name etc. It is recommended to choose an attribute whose value
uniquely identifies the web element.
• Value of attribute – It is the value of an attribute which is being accessed
4) CSS Selector: ID/Class and attribute
► In this sample, we would access the “Password” text box present in the login
form at gmail.com.
► The “Password” text box has an ID attribute whose value is defined as
“Passwd”, type attribute whose value is defined as “password”. Thus ID
attribute, type attribute and their values can be used to create CSS Selector to
access the designated web element.
► Creating a CSS Selector for web element
► Step 1: Locate/inspect the web element (“Password” text box in our case)
and notice that the HTML tag is “input”, attributes are ID and type and their
corresponding values are ”Passwd” and “password” and all of them together
make a reference to the “Password” textbox.
► Verify the locator value
► Step 1: Type “css=input#Passwd[name=’Passwd’]” i.e. the locator value in
the target box in the Selenium IDE and click on the Find Button. Notice that
the “Password” text box would be highlighted.
► Syntax
► css=<HTML tag><. Or #><value of Class or ID attribute><[attribute=Value
of attribute]>
► Two or more attributes can also be furnished in the syntax. For
example, “css=input#Passwd[type=’password’][name=’Passwd’]”.
5) CSS Selector: Sub-string Match a suffix
► CSS in Selenium allows matching a partial string and thus It is used to correspond to the string with the help of a
deriving a very interesting feature to create CSS Selectors using matching suffix.
substrings. There are three ways in which CSS Selectors can be Syntax
created based on the mechanism used to match the substring.
css=<HTML tag><[attribute$=suffix of the
► Types of mechanisms string]>
► All the underneath mechanisms have symbolic significance. •$ – Symbolic notation to match a string using suffix.
• Match a prefix •The suffix – It is the string based on which match operation
• Match a suffix is performed. The likely string is expected to ends with the
specified string.
• Match a substring
For Example, Lets again consider “Password textbox”, so the
► Let us discuss them in detail. corresponding CSS Selector would be:
► Match a prefix css=input#Passwd[name$=’wd’]
► It is used to correspond to the string with the help of a matching Match a substring
prefix. It is used to correspond to the string with the help of a
► Syntax matching substring.
► css=<HTML tag><[attribute^=prefix of the string]> Syntax
css=<HTML tag><[attribute*=sub string]>
• ^ – Symbolic notation to match a string using prefix.
•* – Symbolic notation to match a string using sub string.
• Prefix – It is the string based on which match operation is •Sub string – It is the string based on which match operation
performed. The likely string is expected to start with the specified
string. is performed. The likely string is expected to have the
specified string pattern.
► For Example: Let us consider “Password textbox”, so the
corresponding CSS Selector would be: For Example, lets again consider “Password textbox”, so the
corresponding CSS Selector would be:
► css=input#Passwd[name^=’Pass’]
6) CSS Selector: Inner text
► The inner text helps us identify and create CSS Selector using a string pattern that the HTML Tag
manifests on the web page.
► Consider, “Need help?” hyperlink present below the login form at gmail.com.
► The anchor tag representing the hyperlink has a text enclosed within. Thus this text can be used to
create a CSS Selector to access the designated web element.
► Syntax:
► css=<HTML tag><:><contains><(text)>
• : – The dot sign is used to symbolize contains method
• Contains – It is the value of a Class attribute which is being accessed.
• Text – The text that is displayed anywhere on the web page irrespective of its location.
► This is one of the most frequently used strategies to locate web element because of its simplified
syntax.
 Locators in Selenium:
► Locators are one of the essential components of Selenium infrastructure, which
help Selenium scripts in uniquely identifying the WebElements(such as text box,
button, etc.) present of the web page.
► To access all these locators, Selenium provides the “By” class, which helps in
locating elements within the DOM. It offers several different methods (some of
which are in the image below) like className, cssSelector, id, linkText, name,
partialLinkText, taName, and xpath, etc., which can identify the web elements
based on their corresponding locator strategies.
► You can quickly identify all the supported locators by Selenium by browsing all
the visible methods on the “By” class, as shown below:
► As we can see, Selenium supports the following locators:
• ClassName – A ClassName operator uses a class attribute to identify an object.
• cssSelector – CSS is used to create style rules for webpages and can be used to
identify any web element.
• Id – Similar to class, we can also identify elements by using the ‘id’ attribute.
• linkText – Text used in hyperlinks can also locate element
• name – Name attribute can also identify an element
• partialLinkText – Part of the text in the link can also identify an element
• tagName – We can also use a tag to locate elements
• xpath – Xpath is the language used to query the XML document. The same can
uniquely identify the web element on any page.
► The different locators in Selenium are as follows:
• By CSS ID: find_element_by_id
• By CSS class name: find_element_by_class_name
• By name attribute: find_element_by_name
• By DOM structure or xpath: find_element_by_xpath
• By link text: find_element_by_link_text
• By partial link text: find_element_by_partial_link_text
• By HTML tag name: find_element_by_tag_name
► To use this feature, one needs to call the .find_element_by_id() method of the webdriver class. Here is
the usage for it.
 Handling Wait Commands
► Selenium Wait commands play an important role while executing Selenium tests. Let’s see different wait commands such as
“Implicit“, and “Explicit” wait commands in selenium.
► “While executing scripts, sometimes we may face an exception “Element Not Visible Exception“. This exception appears
when there is a delay in loading time of the elements which we are interacting. To overcome this issue we need to use Wait
Commands. Using the Selenium Wait Commands, our script will wait for the elements to load for certain time before
continuing with the next step.
► Different Types of Selenium Wait Commands are:
1. Implicit Wait
2. Explicit Wait – WebDriverWait
3. FluentWait
Implicit Wait:
► The implicit wait tells to the WebDriver to wait for certain amount of time before it throws an exception. Once we set the
time, WebDriver will wait for the element based on the time we set before it throws an exception. The default setting is 0
(zero). We need to set some wait time to make WebDriver to wait for the required time.
► Note: Implicit Wait is in place for the entire time the browser is open. Time taken to search all the elements are based on the
time fixed for the implicit wait.
► Syntax: driver.manage().timeouts().implicitlyWait(TimeOut, TimeUnit.SECONDS);
► Implicit Wait time is applied to all the elements in the script.
► Implicit wait will accept 2 parameters, the first parameter will accept the time as an integer value and the second parameter
will accept the time measurement in terms of SECONDS, MINUTES, MILISECOND, MICROSECONDS,
NANOSECONDS, DAYS, HOURS, etc.
 Explicit Wait:
► Explicit waits are confined to a particular web element. Explicit Wait is code you define to wait for a certain condition to occur
before proceeding further in the code.
► Explicit wait is of two types:
1. WebDriverWait
2. FluentWait
► WebDriverWait:
► WebDriverWait is applied on certain element with defined expected condition and time. This wait is only applied to the specified
element. This wait can also throw exception when element is not found.
► The following are the Expected Conditions that can be used in Explicit Wait
1. alertIsPresent()
2. elementSelectionStateToBe()
3. elementToBeClickable()
4. elementToBeSelected()
5. frameToBeAvaliableAndSwitchToIt()
6. invisibilityOfTheElementLocated()
7. invisibilityOfElementWithText()
8. presenceOfAllElementsLocatedBy()
9. presenceOfElementLocated()
10. textToBePresentInElement()
11. textToBePresentInElementLocated()
12. textToBePresentInElementValue()
13. titleIs()
14. titleContains()
15. visibilityOf()
16. visibilityOfAllElements()
17. visibilityOfAllElementsLocatedBy()
18. visibilityOfElementLocated()
► Syntax: //WebDriverWait wait = new WebDriverWait(WebDriverRefrence,TimeOut);
WebDriverWait wait = new WebDriverWait (driver, 20);
wait.until(ExpectedConditions.VisibilityofElementLocated(By.xpath(""//button[@value='Save
Changes']"")));
► FluentWait:
► FluentWait can define the maximum amount of time to wait for a specific condition and frequency with which to check
the condition before throwing an “ElementNotVisibleException” exception.
► To say in effortless manner, it tries to find the web element repeatedly at regular intervals of time until the timeout or till the
object gets found.
► We use Fluent Wait commands mainly when we have web elements which sometimes visible in few seconds and some times
take more time than usual to visible. Mainly in Ajax applications.
Syntax:
► Wait wait = new FluentWait(WebDriver reference).withTimeout(timeout, SECONDS).pollingEvery(timeout,
SECONDS).ignoring(Exception.class);
► WebElement foo=wait.until(new Function<WebDriver, WebElement>() {
► public WebElement applyy(WebDriver driver) {
► return driver.findElement(By.id("foo"));
► }});
 Validation in Selenium
► Validation means checking whether the UI elements are rendered on the web page correctly or not.
► For Example:
• Checking whether the hidden elements are hidden or not.
• Checking whether the form input field is editable or not.
► It’s very important to put check and validation at each and every point possible to write good automation scripts.
► Every application under test has lots of validations involved during “Testing process”. Selenium provides various methods
to validate UI elements.
Type of UI Validations:
• Page Title Validation
• Page URL Validation
• Scroll Down
• Verifying hidden elements
• Checkbox Validations
• Radio button Validations
• To verify whether a dropdown allows multiple selections or not.
• Read-only property of WebElement.
• Check if an Element exists or not.
• Textbox value validation
• Disabled/Enabled property of a Web Element
• Page Content Validations
Let us learn each type of validation one-by-one:
► Page Title Validation: To verify the title of the page, we have a method called getTitle().
Syntax : Driver.getTitle()
► Page URL Validation: To verify the URL of the page, there is a method called getCurrentUrl().
Syntax: Driver.getCurrentUrl();
► Hidden Element Verification: To verify whether a Web Element is visible or hidden on the page. Selenium has a
method called isDisplayed(). It’s a boolean method which returns true if the WebElement is visible and return false if the
method is hidden.
Syntax: boolean status = Driver.findElement(By.xpath("//input[@id='radioBtn']")).isDisplayed();
► Checkbox Validation: To verify that a checkbox is checked or not. Selenium provides a method called isEnabled(). It’s
a boolean method which returns true if the checkbox is checked and returns false if it is not checked.
Syntax: boolean status = Driver.findElement(By.xpath("//input[@type='checkbox']")).isEnabled();
► Radio Button Validation: To verify that a radio button is selected or not. Selenium provides a method called
isSelected(). It’s a boolean method which returns true if it is enabled otherwise it returns false.
Syntax: boolean status = Driver.findElement(By.xpath("//input[@type='radio']")).isSelected();
► To verify whether a dropdown allows multiple selections or not. There is a method called isMultiple(). This method is a
boolean method which returns true if the dropdown allows multiple selections else will return false.
Syntax: Select dropdown = new Select(Driver.findElement(By.id("searchList")));
boolean status = dropdown.isMultiple();
 Handling Store Commands
► Store
► To store variables in Selenium IDE, we use the "store" command. The illustration below stores the value
"tutorial" to a variable named "myVariable.“

► To access the variable, simply enclose it in a ${ ... } symbol. For example, to enter the value of
"myVariable" onto the "userName" textbox of Mercury Tours, enter ${myVariable} in the Value field.
 Benefits of Using Selenium IDE
• Provides you the capability of automatically recording your test cases based upon the
interactions with the browser
• Gives developers greater flexibility in executing the test cases. Either the test developer can run
the entire test suite consisting of multiple test cases or execute a single test case
• Operates on the basis of the rich set of Selenese commands, which helps the IDE understand
what needs to be done
• Allows the test developers to set breakpoints for the purpose of debugging particular test cases
• Test cases can be re-used using the run command. (e.g. allowing you to re-use the logic of login
or reload on multiple places in the entire suite)
• Use of multiple-locators for each element in the IDE ensures successful execution
 Limitations of Selenium IDE
• Not suitable for testing extensive data
• Connections with the database can not be tested
• Cannot handle the dynamic part of web-based applications
• Does not support capturing of screenshots on test failures
• No feature available for generating result reports