Testing With Selenium WebDriver (68 Blogs) Become a Certified Professional
AWS Global Infrastructure

Software Testing

Topics Covered
  • Testing With Selenium WebDriver (58 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

All you need to know about WebElement in Selenium

Published on Jun 04,2019 3.3K Views
1 / 8 Blog from Locators and Waits in Selenium

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

Elements are an essential part of something abstract, the same way Selenium WebDriver encapsulates a simple form element called WebElement which represents an HTML element. So, in this article, we will be digging deep in understanding the major role played by the WebElement in Selenium. 

This blog will be covering the following topics:

So, let’s begin by understanding what are web elements.

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. 


html
	body
		 My First Heading;
		 My first paragraph;
	/body
/html

There are various techniques using which the WebDriver identifies the WebElements which are based on different properties like ID, Name, Class, XPath, Tagname, CSS Selectors, link Text, etc.

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

  • findElement() – finds a single WebElement and returns it as a WebElement object.
  • findElements() – finds elements in a particular location using locators

WebElement in Selenium: Types of Web elements

WebElements in Selenium can be divided into different types, namely:

  1. Edit box
  2. Link
  3. Button
  4. Image, image link, an image button 
  5. Text area
  6. Checkbox
  7. Radio button
  8. Dropdown list
  • Edit box: It is a basic text control that enables a user to type a small amount of text.

Edit box - Webelement in Selenium - Edureka

  • 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.

link - Web element in Selenium - Edureka

  • Button: This represents a clickable button, which can be used in forms and places in the document that needs a simple, standard button functionality.

button - Web element in Selenium - Edureka

  • Image: It helps in performing actions on images like clicking on the image link or the image button, etc.

image - WebElement in Selenium - Edureka

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

text box - Web element in Selenium - Edureka

  • 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.

Checkbox- Webelements in Selenium- Edureka

  • 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.

radio-button - Webelement in Selenium- Edureka

  • 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. 

dropdown- Webelement in Selenium - Edureka

This is about the different types of WebElements in Selenium.

Now let’s understand the operations to be performed on them.

WebElement in Selenium: Operations performed on the WebElements

In order to access WebElements, we need to perform a set of operations starting with browser actions until the operations are performed on  frames.
  • Operations performed on the browser
    1. Launch the browser
    2. Navigate to particular web page
    3. Close the current browser
    4. Close all browsers opened by WebDriver during execution
    5. Maximize browser
    6. Refresh the browser
  • Operations on the web page
    1. Get page title
    2. Get page URL
  • Operations on edit box
    1. Enter a value
    2. Get the value
    3. Clear the value
  • Operations on link
    1. Click the link
    2. Return the link name
  • Operations on button
    1. Click enabled
    2. Display status
  • Operations on image
    1. General image(No functionality)
    2. Image button(click)
    3. Image link(redirects to another page)
  • Operations on text area
    1. Return or capture the messages from the web page
  • Operations on checkbox
    1. Select the checkbox
    2. Unselect the checkbox
  • Operations on radio button
    1. Select radio button
    2. Check if it displays the radio button
  • Operations on drop down
    1. Select an item in the list
    2. Get the item count
  • Operations on frame
    1. Switch from top window to a particular frame on the web page
    2. Switch to a frame to top window

These are the operations that are performed on the WebElement.

Now, the question is how to locate these WebElements to perform the above actions.

WebElement in Selenium: How to locate web elements on the web page

Selenium provides functionalities that help in locating the element on a web page. It makes use of element locators. Let’s take a look at how locators help in finding the WebElement. 
Locators are defined as an address that identifies a WebElement uniquely within a web page. It is a command that tells Selenium IDE which GUI elements it needs to operate, like – Text Box, Buttons, Check Boxes, etc. Using the right locator ensures that the tests are faster, more reliable and has lower maintenance over releases.

Types of element locators

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

  • Id locator
  • Name locator
  • linkText & Partial linkText
  • CSS Selector
  • XPath

Locators in Selenium- WebElements in Selenium- Edureka

  • 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 priority among multiple locators.
  • Name locator: This is also an effective way to locate an element which has 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.
  • linkText & ParialLinkText: You can identify the hyperlinks on a web page using this linkText. It can be determined with the help of an anchor tag (<a>). To create the hyperlinks on a web page, you can use the anchor tags followed by the link text. In some cases, you may need to find links by a portion of the text in a linkText element. In such situations, you can use Partial Link Text to locate elements.
  • CSS Selectors: 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 page. We’ll talk more about CSS selectors in the next topic. 
  • 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. Here, you can easily write an XPath script/query to locate any element in the webpage. 

Also, check out this video where our Selenium expert explains how to locate elements using element locators by demonstrating a simple demo

Locators In Selenium Webdriver | Edureka

Having understood how to locate the web elements, let’s move on and work on a demo that demonstrates the operations performed on the web element.

WebElement in Selenium: Demo

To start with the demo, we require certain prerequisites to work on WebElements in Selenium.
  • Java libraries
  • IDE. We prefer working on Eclipse because it is more efficient when working on Java projects

In this demo, we’ll see how to automate one of the most famous e-commerce website Amazon where we’ll understand the WebElement interface.

  • First, we need to select a browser to perform actions. In this case, we will work on Chrome so select the ChromeDriver browser and specify the path in which it is present
  • Instantiate the ChromeDriver instance
  • Get the URL of the web page
  • Maximize the current web page
  • Find the web element using the element locators like ID, name, class and so on
  • Send keys to the particular location on the web page
  • Click the search button
  • Navigate to a new website
  • Navigate back to the previous web page by using the operations

package co.edureka;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class SeleniumWebElement {

public static void main(String[] args) throws InterruptedException {
System.setProperty("webdriver.chrome.driver", "C:UsersVaishnaviDesktopChromechromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://www.amazon.in/");
driver.manage().window().maximize();
Thread.sleep(4000);
driver.findElement(By.id("twotabsearchtextbox")).sendKeys("Poco F1");
Thread.sleep(4000);
driver.findElement(By.className("nav-input")).click();
driver.findElement(By.linkText("ACM")).click();
driver.navigate().to("http://edureka.co/blog");
Thread.sleep(4000);
driver.navigate().back();
driver.quit();

}

Take a look at this video where our Selenium expert is explaining how WebElement plays an important role in testing an application

WebElements in Selenium | Edureka

With this, we come to an end to this “WebElement in Selenium” blog. I Hope you guys enjoyed this article and understood how web elements play a major role while working on Selenium. Now that you have understood why web elements are important, check out the Selenium Certification Course by Edureka, a trusted online learning company with a network of more than 650,000 satisfied learners spread across the globe. This course is designed to introduce you to the complete Selenium features and its importance in testing software.
Got a question for us? Please mention it in the comments section of “WebElement in Selenium” and we will get back to you.
Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.