{"id":2775,"date":"2020-04-23T20:05:21","date_gmt":"2020-04-23T14:35:21","guid":{"rendered":"https:\/\/www.h2kinfosys.com\/blog\/?p=2775"},"modified":"2026-01-05T06:15:23","modified_gmt":"2026-01-05T11:15:23","slug":"webelement-in-selenium","status":"publish","type":"post","link":"https:\/\/www.h2kinfosys.com\/blog\/webelement-in-selenium\/","title":{"rendered":"WebElement in Selenium"},"content":{"rendered":"<p><i><span style=\"font-weight: 400;\">WebElement <\/span><\/i><span style=\"font-weight: 400;\">in<\/span> <a href=\"https:\/\/www.h2kinfosys.com\/blog\/selenium-webdriver-handling-images\/\"><b><i>Selenium WebDriver<\/i><\/b><b>\u00a0<\/b><\/a><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<h2><b>What is WebElement in Selenium?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">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 <a href=\"https:\/\/www.h2kinfosys.com\/blog\/selenium-form-webelement\/\">WebElements <\/a>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. <\/span><\/p>\n<pre><b>html<\/b>\n\n<b>\u00a0\u00a0\u00a0\u00a0body<\/b>\n\n<b>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Heading;<\/b>\n\n<b>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Notes;<\/b>\n\n<b>\u00a0\u00a0\u00a0\u00a0\/body<\/b>\n\n<b>\/html<\/b><\/pre>\n<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Selenium WebDriver provides two different methods to find the elements on the web page.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>findElement()<\/b><span style=\"font-weight: 400;\">\u00a0\u2013 This command will return the single WebElement on the web page and returns it as a WebElement object.<\/span><\/li>\n<li><b>find Elements()<\/b><span style=\"font-weight: 400;\">\u00a0\u2013 This command will return a list of elements on the web page and finds the elements in a particular location using locators.<\/span><\/li>\n<\/ul>\n<h2><b>Different types of Web elements in Selenium?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">In Selenium WebElements can be divided into different types, like:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Button<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Link<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Edit box<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Text Area<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Image<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Checkbox<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Dropdown list<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Radio button<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><b>Link:<\/b><span style=\"font-weight: 400;\"> It is more properly referred to as a hyperlink and connects one webpage to another webpage. The user allows clicking from page to page.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Button:<\/b><span style=\"font-weight: 400;\"> It can be used in forms that represent a clickable button. It also used in the document that needs simple, standard button functionality.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Edit box:<\/b><span style=\"font-weight: 400;\"> It <\/span><span style=\"font-weight: 400;\">is a basic text control that enables a user to type some amount of text.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Text Area:<\/b> <span style=\"font-weight: 400;\">It is an inline element used in editing a designate plain-text control containing multiple lines.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Image:<\/b> <span style=\"font-weight: 400;\">It<\/span> <span style=\"font-weight: 400;\">helps in presenting actions on images like clicking on the image button, image link, etc.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Checkbox:<\/b><span style=\"font-weight: 400;\"> It allows users to select single or multiple options from a list of options.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Radio button:<\/b><span style=\"font-weight: 400;\"> It is an element found in forms. It allows the user to choose a single option from a list of options.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Dropdown<\/b> <b>list:<\/b><span style=\"font-weight: 400;\"> 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.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>\u00a0 \u00a0 HTML Object<\/b><\/td>\n<td><b> \u00a0 \u00a0 TagName<\/b><\/td>\n<td><b>\u00a0 Mandatory Attributes<\/b><\/td>\n<td><b>Optional Attributes<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Input Field<\/b><\/td>\n<td><b>input\u00a0<\/b><\/td>\n<td><b>type=\u201dinput\u201d or \u201cemail\u201d\u00a0<\/b><\/td>\n<td><b>id, class, name\u00a0<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Button<\/b><\/td>\n<td><b>input<\/b><\/td>\n<td><b>type=\u201dsubmit\u201d\u00a0<\/b><\/td>\n<td><b>id, class, name<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Radio buttons<\/b><\/td>\n<td><b>input<\/b><\/td>\n<td><b>type=\u201dradio\u201d\u00a0<\/b><\/td>\n<td><b>id, class, name<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Checkbox<\/b><\/td>\n<td><b>input<\/b><\/td>\n<td><b>type=\u201dcheckbox\u201d\u00a0<\/b><\/td>\n<td><b>id, class, name<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Link<\/b><\/td>\n<td><b>a\u00a0<\/b><\/td>\n<td><b>href<\/b><\/td>\n<td><b>id, class, name<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Images<\/b><\/td>\n<td><b>img\u00a0<\/b><\/td>\n<td><b>src<\/b><\/td>\n<td><b>id, class, name<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Dropdown<\/b><\/td>\n<td><b>select<\/b><\/td>\n<td><\/td>\n<td><b>id, class, name<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Text<\/b><\/td>\n<td><b>div,span,p,h1,h2\u00a0<\/b><\/td>\n<td><\/td>\n<td><b>id, class, name<\/b><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><b>Operations performed on the WebElements in Selenium<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">To access WebElements on the web page, we need to perform a set of operations.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Operations on the browser<\/span><\/li>\n<\/ul>\n<p>[box type=&#8221;shadow&#8221; align=&#8221;&#8221; class=&#8221;&#8221; width=&#8221;&#8221;]<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Launch the browser<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Navigate to a particular web page<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Close the current browser<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Close all the browsers<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Maximize and Minimize the browser<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Refresh the browser[\/box]<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Operations on the web page<\/span><\/li>\n<\/ul>\n<p>[box type=&#8221;shadow&#8221; align=&#8221;&#8221; class=&#8221;&#8221; width=&#8221;&#8221;]<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Displaying page URL<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Displaying page Title[\/box]<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Operations on link<\/span><\/li>\n<\/ul>\n<p>[box type=&#8221;shadow&#8221; align=&#8221;&#8221; class=&#8221;&#8221; width=&#8221;&#8221;]<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Clicking the link<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Return the link name[\/box]<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Operations on the edit box<\/span><\/li>\n<\/ul>\n<p>[box type=&#8221;shadow&#8221; align=&#8221;&#8221; class=&#8221;&#8221; width=&#8221;&#8221;]<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Entering a value<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Clearing a value<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Getting a value[\/box]<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Operations on button<\/span><\/li>\n<\/ul>\n<p>[box type=&#8221;shadow&#8221; align=&#8221;&#8221; class=&#8221;&#8221; width=&#8221;&#8221;]<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Clicking on button<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Displaying button status[\/box]<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Operations on the text area<\/span><\/li>\n<\/ul>\n<p>[box type=&#8221;shadow&#8221; align=&#8221;&#8221; class=&#8221;&#8221; width=&#8221;&#8221;]<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Capturing the messages from the web page[\/box]<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Operations on Checkbox<\/span><\/li>\n<\/ul>\n<p>[box type=&#8221;shadow&#8221; align=&#8221;&#8221; class=&#8221;&#8221; width=&#8221;&#8221;]<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Selecting a checkbox<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Unselecting a checkbox[\/box]<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Operations on the Radio button<\/span><\/li>\n<\/ul>\n<p>[box type=&#8221;shadow&#8221; align=&#8221;&#8221; class=&#8221;&#8221; width=&#8221;&#8221;]<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Selecting a radio button<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Unselecting a checkbox[\/box]<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Operations on dropdown<\/span><\/li>\n<\/ul>\n<p>[box type=&#8221;shadow&#8221; align=&#8221;&#8221; class=&#8221;&#8221; width=&#8221;&#8221;]<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select an item from the list<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Get the item list count[\/box]<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Operations on frame<\/span><\/li>\n<\/ul>\n<p>[box type=&#8221;shadow&#8221; align=&#8221;&#8221; class=&#8221;&#8221; width=&#8221;&#8221;]<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Switching from a top window to a particular frame on the web page<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Switching to a frame to top window[\/box]<\/span><\/li>\n<\/ol>\n<h2><b>Locating web elements on the web page<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">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 <a href=\"https:\/\/www.h2kinfosys.com\/blog\/selenium-ide-basics\/\">Selenium IDE<\/a> to operate GUI elements like Buttons, Text boxes, Check Boxes, etc. Locator ensures that the tests are faster, reliable and lower maintenance over releases.<\/span><\/p>\n<h2><b>Types of element Locators<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Selenium makes use of different types of locators to identify WebElements more accurately and precisely, namely:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Name locator<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">ID locator<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">XPath<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">CSS Selector<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">LinkText and PartialLink Text<\/span><\/li>\n<\/ol>\n<p><b>ID locator:<\/b><span style=\"font-weight: 400;\"> ID is the most popular way to identify a web element on the web page. ID\u2019s are the safest and fastest locator option and must choose as the first priority among other locators.<\/span><\/p>\n<p><b>Name locator: <\/b><span style=\"font-weight: 400;\">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 <\/span><b>NoSuchElementException<\/b><span style=\"font-weight: 400;\"> will be raised if no matching element was found.<\/span><\/p>\n<p><b>Xpath:<\/b><span style=\"font-weight: 400;\"> Xpath is a query language to manage <a href=\"https:\/\/en.wikipedia.org\/wiki\/XML\" rel=\"nofollow noopener\" target=\"_blank\">XML<\/a> 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.<\/span><\/p>\n<p><b>LinkText &amp; PartialLink Text:<\/b><span style=\"font-weight: 400;\"> It is used to identify the hyperlinks on a web page. This can be identified with the help of an anchor tag &lt;a&gt;. We use anchor tags<\/span> <span style=\"font-weight: 400;\">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.<\/span><\/p>\n<p><b>CSS Selectors:<\/b><span style=\"font-weight: 400;\"> 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.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WebElement in Selenium WebDriver\u00a0encapsulates 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 is WebElement in Selenium? Anything present on the webpage is a WebElement. A webpage is comprised of many different HTML elements such as buttons, links, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2814,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[574,381,575,573],"class_list":["post-2775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-selenium-tutorials","tag-different-types-of-web-elements","tag-selenium-ide","tag-types","tag-webelements-in-selenium"],"_links":{"self":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts\/2775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/comments?post=2775"}],"version-history":[{"count":1,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts\/2775\/revisions"}],"predecessor-version":[{"id":33821,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts\/2775\/revisions\/33821"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/media\/2814"}],"wp:attachment":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/media?parent=2775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/categories?post=2775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/tags?post=2775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}