IDENTIFYING ELEMENTS

IN GUI
 WHAT ARE WEBELEMENTS IN SELENIUM?

• Anything that is present on the web page is a WebElement such as text box,
button, etc. WebElement represents an HTML element.
• Selenium WebDriver encapsulates a simple form element as an object of the
WebElement.
• It basically represents a DOM element, and all the HTML documents are
made up by these HTML elements.
 WEBELEMENT IN SELENIUM: TYPES OF
WEB ELEMENTS
WebElements in Selenium can be divided into different types, namely:
• Edit box
• Link
• Button
• Image, image link, an image button
• Text area
• Checkbox
• Radio button
• Dropdown list
• Edit box: It is a basic text control that enables a user to type a small amount
of text.

• Link: link is more appropriately referred to as a hyperlink and connects one

web page to another. It allows the user to click their way from page to page.

• Button: This represents a clickable button, which can be used in forms and
places in the document that needs a simple, standard button functionality.
• Image: It helps in performing actions on images like clicking on the image
link or the image button, etc.

• Text area: It is an inline element used to designate a plain-text editing control

containing multiple lines.

• Checkbox: This is a selection box or a tick box which is a small interactive

box that can be toggled by the user to indicate an affirmative or a negative
choice.
• Radio button: It is an option button which is a graphical control element that
allows the user to choose only one predefined set of mutually exclusive
options.

• Dropdown list: It is a graphical control element, similar to the list box, which
allows the user to choose one value from the list. When this drop-down list is
inactive, it displays only a single value.
 METHODS TO FIND THE ELEMENTS ON
THE WEB PAGE
• Selenium is used for automatic data loading and regression testing of a website.
As part of this automation feature interaction with a web page requires the driver
to locate the web element and either trigger event like-click, enter, select, etc or
type in the field value.
• Find Element command is used to uniquely identify a (one) web element within
the web page. Whereas, Find Elements command is used to uniquely identify the
list of web elements within the web page.
• findElement() – finds a single WebElement and returns it as a WebElement object.
• findElements() – finds elements in a particular location using locators
 DIFFERENCE BETWEEN “FINDELEMENT”
AND “FINDELEMENTS”
Find Element Find Elements
Returns the first matching web
element if multiple web Returns a list of matching web
elements are discovered by the elements
locator
Throws
Returns an empty list if no
NoSuchElementException if the
matching element found
element is not found
This method is used only to This method is used to return a
detect a unique web element collection of matching elements.
 FINDELEMENT COMMAND SYNTAX

• Find Element command takes in the By object as the parameter and returns an
object of type WebElement. By object in turn can be used with various locator
strategies such as ID, Name, Class Name, XPATH etc. Below is the syntax of
FindElement command in Selenium web driver.

WebElement elementName =
driver.findElement(By.LocatorStrategy("LocatorValue"));
 WHAT IS LOCATORS IN SELENIUM?

• Locators are defined as an address that identifies a web element uniquely within
the webpage.
• It is a command that tells Selenium which GUI elements like – Text Box, Buttons,
Check Boxes etc, it needs to operate on.
• Finding correct GUI elements is a prerequisite for creating an automation script
but, accurate identification of GUI elements is much more difficult than it sounds.
• Sometimes, you might even end up working with incorrect GUI elements or no
elements at all! Hence, using the right locator ensures that the tests are faster,
more reliable or has lower maintenance over releases.
• If you’re lucky enough to be working
with unique IDs and Classes, then
you’re usually all set.
• But there will be times when
choosing the right locator will
become a nightmare because of the
complexity of finding the web
elements in the webpage.
• Now let’s understand the various
types of locators in Selenium.
 TYPES OF LOCATORS IN SELENIUM

• There is a diverse range of web elements like text box, id, radio button etc. It
requires an effective and accurate approach to identify these elements.
Thereby, you can assert that with an increase in effectiveness of locator, the
stability of the automation script will increase.
In order to identify web elements accurately and precisely, selenium makes
use of different types of locators. They are as follows:

• Id locator
• Name locator
• linkText & Partial linkText
• CSS Selector
• XPath
Id Locator
• The most popular way to identify web element is to use Id. Id’s are
considered as the safest and fastest locator option and should always be the
first choice even when there are multiple choices. For example – the
employee Number or Account which will be unique.

• Now, let’s understand the working of ID locator with the help of an example. I
will launch Google Chrome and navigate to yahoo.com. Here, we will try to
locate the signin button using ID Locator.
The id for signin button is “header-signin-link”
Name Locator
• This is also an effective way to locate an element with a name attribute. With
this strategy, the first element with the value of the name attribute will be
returned. If no element has a matching name attribute, then a
NoSuchElementException will be raised.

• Now, let’s see the working of name locator with the help of an example. In
the image (in the next slide) you can see, the name locator possesses a
value called username. The difference here is that you should use a name
instead of id.
linkText
• You can identify the hyperlinks on a web page using linkText. It can be
determined with the help of an anchor tag (<a>). In order to create the
hyperlinks on a web page, you can use anchor tags followed by the linkText.
• Now, let’s see the working of the linkText locator with the help of an example.
Suppose you want to locate ‘Help‘ link as shown in the figure.
• On inspecting “help” – you can notice that it starts with an anchor tag. But,
this anchor tag doesn’t have any name and Id attributes. In such cases, you
can use linkText locator.
CSS Selectors
• The CSS is mainly used to provide style rules for the web pages and you can
use it for identifying one or more elements in the web page.
• The CSS selector is always the best possible way to locate complex elements
in the page.
• There are 5 types of CSS Selectors in Selenium tests-
• ID
• Class
• Attribute
• Sub-String
• Inner String
• ID - driver.findElement(By.cssSelector(<HTML
tag><#><Value of ID attribute>))
• Example: driver.findElement(By.cssSelector(“input#login-
username”)
• HTML tag: used to denote the web element to be accessed
(optional)
• #: used to symbolize the ID attribute. Note that the hash is
mandatory in cases where ID attribute is used to create a CSS
Selector.
• Value of ID attribute: the value of the ID attribute being
accessed. This value is always preceded by the hash.
• Class - driver.findElement(By.cssSelector(<HTML
tag><.><Value of Class attribute>))
• Example: driver.findElement(By.cssSelector(“input.phone-
no”)
• HTML tag: used to denote the web element to be accessed
(optional)
• . : The dot is used to symbolize the Class attribute. Note that
the dot is mandatory in cases where a Class attribute is used
to create a CSS Selector. The value of the Class is always
preceded by a dot.
• Value of Class attribute: the value of the class attribute being
accessed. This value is always preceded by the dot.
• Any Attribute - driver.findElement(By.cssSelector(<HTML
tag><[attribute=Value of attribute]>))
• Example: driver.findElement(By.cssSelector(“input[type=text]”)

• Multiple Attributes -
driver.findElement(By.cssSelector(<HTML
tag><[attribute1=Value of attribute1]><[attribute2=Value
of attribute2]><[attribute3=Value of attribute3]>))
• Example: driver.findElement(By.cssSelector(“input[type=text]
[name=username]”)
Sub-string
• In Selenium, CSS allows the matching of a partial string
which, offers a way to create CSS selectors utilizing
sub-strings. This can be done in three ways.
• Types of mechanisms use to match sub-strings
• Matching a prefix
• Matching a suffix
• Matching a substring
Match a prefix
• The purpose of this is to correspond to the string by
using a matching prefix.
• Syntax - driver.findElement(By.cssSelector(<HTML
tag><[attribute^=prefix of the string]>)
• Example:
driver.findElement(By.cssSelector(“input[name^=user]”)
• ^ : the symbol used to match a string using a prefix
• Prefix: the string on the basis of which the match operation is
performed.
Match a suffix
• The purpose of this is to correspond to the string by using
a matching suffix.
• Syntax - driver.findElement(By.cssSelector(<HTML
tag><[attribute$=suffix of the string]>)
• Example:
driver.findElement(By.cssSelector(“input[name$=name]”)
• $ : the symbol used to match a string using a suffix
• Suffix: the string on the basis of which the match operation is
performed.
Match a substring
• The purpose of this is to correspond to the string by
using a matching substring.
• Syntax - driver.findElement(By.cssSelector(<HTML
tag><[attribute*=sub string]>)
• Example:
driver.findElement(By.cssSelector(“input[name*=erna]”)
• * : the symbol used to match a string using a sub-string
• Sub string: the string on the basis of which the match
operation is performed.
XPath
• XPath is a language to query XML documents. XPath is an important strategy
to locate elements in selenium. It also consists of a path expression along
with some conditions.

• Syntax - driver.findElement(By. xpath(<xpath>)

• Example: driver.findElement(By.xpath(“//input[@id=‘login-username’]”))
Selenium Locators Best Practices
• Understanding the concept of locators in Selenium is one thing but knowing
how to use them is quite another. Being able to build a robust locator begins
with an understanding of what a robust locator is. Here are three below listed
criteria that you must adhere to while using locators in selenium:
• Robust locators in Selenium are as simple and small as possible: The more
elements a locator contains, the higher the chances it’ll break because of the
change in the page structure.
• Selenium locators still work after you change the properties of a UI element:
Relying on frequently-changed attributes like modifier classes (menu__item–red) is
never a good practice.
• Selenium locators that are robust in nature still work after you change the UI
elements around the element you target: Whenever you use a non-unique
attribute, there are chances that locators will break because someone added an
element with that same attribute above.
THANK YOU