WebElement in Selenium: How to Locate with Examples!

Elements are an essential part of something abstract, the same way Selenium Certification 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. 

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

Types of Web elements Selenium

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.

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

This is about the different types of WebElements in Selenium.

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

Operations performed on the Selenium WebElements

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

How to locate web elements on the web page

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

• 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

Example to Locate WebElement 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

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

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();

}

Find out our Selenium Training in Top Cities/Countries