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:

Button
Link
Edit box
Text Area
Image
Checkbox
Dropdown list
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