WebElement in Selenium

WebElement in Selenium WebDriver encapsulates a simple form element that represents an HTML element. So, in this article, we will learn how the WebElement played a major role in Selenium.

What are WebElements in Selenium?

Anything present on the webpage is a WebElement. A webpage is comprised of many different HTML elements such as buttons, links, forms, text boxes, etc. that are named as WebElements to the context of WebDriver, and together these elements on a webpage will achieve the business functionalities. Selenium WebDriver represents a DOM element and all the HTML documents are made up of these HTML elements.

html

    body

         Heading;

        Notes;

    /body

/html

 

There are different techniques through which the Selenium WebDriver identifies the WebElements which are based on different properties like Name, ID, XPath, CSS Selector, TagName, etc.

Selenium WebDriver provides two different methods to find the elements on the web page.

• findElement() – This command will return the single WebElement on the web page and returns it as a WebElement object.
• find Elements() – This command will return a list of elements on the web page and finds the elements in a particular location using locators.

Different types of Web elements in Selenium?

In Selenium WebElements can be divided into different types, like:

1. Button
2. Link
3. Edit box
4. Text Area
5. Image
6. Checkbox
7. Dropdown list
8. Radio button

 

• Link: It is more properly referred to as a hyperlink and connects one webpage to another webpage. The user allows clicking from page to page.
• Button: It can be used in forms that represent a clickable button. It also used in the document that needs simple, standard button functionality.
• Edit box: It is a basic text control that enables a user to type some amount of text.
• Text Area: It is an inline element used in editing a designate plain-text control containing multiple lines.
• Image: It helps in presenting actions on images like clicking on the image button, image link, etc.
• Checkbox: It allows users to select single or multiple options from a list of options.
• Radio button: It is an element found in forms. It allows the user to choose a single option from a list of options.
• Dropdown list: It represents a graphical control element, which allows the user to select one value from the list of options. It displays only a single value when the drop-down list is inactive.

With Tagname, Mandatory Attributes and Optional Attributes, we identify the elements on the web page. Optional attributes are generally id, name, class. These are the most common elements and they can be present with any element on the web page. Generally, id and name are unique they uniquely identify the element. If an element on the page is got id and name then no other element on the page should have that particular id or name.

 

HTML Object	TagName	Mandatory Attributes	Optional Attributes
Input Field	input	type=”input” or “email”	id, class, name
Button	input	type=”submit”	id, class, name
Radio buttons	input	type=”radio”	id, class, name
Checkbox	input	type=”checkbox”	id, class, name
Link	a	href	id, class, name
Images	img	src	id, class, name
Dropdown	select		id, class, name
Text	div,span,p,h1,h2		id, class, name

Operations performed on the WebElements in Selenium

To access WebElements on the web page, we need to perform a set of operations.

• Operations on the browser

• Operations on the web page

• Operations on link

• Operations on the edit box

• Operations on button

• Operations on the text area

• Operations on Checkbox

• Operations on the Radio button

• Operations on dropdown

• Operations on frame

Locating web elements on the web page

Selenium helps in locating the web element on a web page. It uses element locators to locate the element on the web page. Locators define an address that identifies unique WebElements within a web page. It tells Selenium IDE to operate GUI elements like Buttons, Text boxes, Check Boxes, etc. Locator ensures that the tests are faster, reliable and lower maintenance over releases.

Types of element Locators

Selenium makes use of different types of locators to identify WebElements more accurately and precisely, namely:

1. Name locator
2. ID locator
3. XPath
4. CSS Selector
5. LinkText and PartialLink Text

ID locator: ID is the most popular way to identify a web element on the web page. ID’s are the safest and fastest locator option and must choose as the first priority among other locators.

Name locator: It is also an effective and popular way to identify an element on the web page which has a name attribute. With this strategy, it will return the first element with the value of the name attribute. A NoSuchElementException will be raised if no matching element was found.

Xpath: Xpath is a query language to manage XML documents. It is the most important strategy to locate elements in selenium. Xpath consists of path expression with some conditions, where you can write easily XPath scripts to locate any element on the webpage.

LinkText & PartialLink Text: It is used to identify the hyperlinks on a web page. This can be identified with the help of an anchor tag <a>. We use anchor tags to create the hyperlinks on a web page followed by the link text. Sometimes, you may need to identify the links by a small portion of the text in a link Text element. In such situations, you can use PartialLink Text to locate the elements.

CSS Selectors: CSS is mainly used to find style rules for the web pages. It is used for identifying one or more elements on the web page. The CSS selector is the best way to locate complex elements on the page.