WebElement in Selenium

WebElement in Selenium

Forms are the fundamental web elements that capture information from website visitors. Web forms include different GUI controls such as text boxes, password fields, checkboxes, radio buttons, dropdowns, and file inputs.

This tutorial explains how to access each form element using Selenium WebDriver with Java. Selenium encapsulates every form element as an object of WebElement. It provides an API to locate elements and act on them, including entering text, clicking buttons, and submitting forms. The sections below cover the methods available for each form element.

Introduction to WebElement, findElement(), findElements()

Selenium WebDriver represents a simple form element as an object of WebElement.

WebDriver identifies form elements using different properties of the web element, including ID, Name, Class, XPath, Tagname, CSS selectors, and link text.

WebDriver provides the following two WebElement methods to find elements:

• findElement() – finds a single web element and returns it as a WebElement Selenium object.
• findElements() – returns a list of WebElement objects matching the locator criteria.

The example below shows how to retrieve a single element, a text field on a web page, as a WebElement object using the findElement() method. The findElements() method for finding multiple elements is covered in subsequent tutorials.

Step 1) Import the package required to create WebElement objects.

Step 2) Call the findElement() method available on the WebDriver class to retrieve a WebElement object, as shown below.

Selenium Input Text

Input boxes refer to either of these two types:

1. Text Fields – Selenium input text boxes that accept typed values and display them exactly as entered.
2. Password Fields – text boxes that accept typed values but mask them as a series of special characters (commonly dots or asterisks) to hide sensitive input.

   

Locators

The findElement() method takes one parameter, which is a locator that points to the element. Different locators, including By.id(), By.name(), By.xpath(), and By.cssSelector(), find elements on the page using their properties such as id, name, or path.

You can use plugins like FirePath to obtain the id, xpath, and other locator values for elements.

Using the example site https://demo.guru99.com/test/login.html, the code below locates the “Email Address” text field using the id locator and the “Password” field using the name locator.

1. Email text field is located by id.
2. Password field is located by name.

sendkeys in Selenium

sendKeys() in Selenium is a method used to enter editable content in text and password fields during test execution. These fields are identified through locators such as name, class, and id. The method is available on the WebElement object. Unlike the type method, sendKeys() does not replace the existing text in a text box.

How to Enter Text in Selenium

To enter text into text fields and password fields, sendKeys() is the method available on the WebElement in Selenium.

Using the same example of https://demo.guru99.com/test/login.html, the snippet below locates the text field and password field and enters text in Selenium.

1. Find the “Email Address” text field using the id locator.
2. Find the “Password” field using the name locator.
3. Enter text into the “Email Address” using the Selenium sendKeys method.
4. Enter a password into the “Password” field using the sendKeys() method.

Deleting Values in Input Boxes

The clear() method deletes the text inside an input box. This method does not need a parameter. The snippet below clears the text from the Email or Password fields.

Selenium Click Buttons

The Selenium click button is accessed using the click() method.

In the example above

1. Find the button to Sign in.
2. Click the “Sign-in” button on the login page of the site to authenticate.

Selenium Submit Buttons

Submit buttons send the entire form to the server. You can either call the click() method on the WebElement, as shown above, or use the submit() method on any element in the form or on the submit button itself.

When submit() is used, WebDriver looks up the DOM to identify the form that the element belongs to and then triggers its submit function.

Complete Code

Here is the complete working code.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.*;

public class Form {
    public static void main(String[] args) {

        // declaration and instantiation of objects/variables
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        String baseUrl = "https://demo.guru99.com/test/login.html";
        driver.get(baseUrl);

        // Get the WebElement corresponding to the Email Address(TextField)
        WebElement email = driver.findElement(By.id("email"));

        // Get the WebElement corresponding to the Password Field
        WebElement password = driver.findElement(By.name("passwd"));

        email.sendKeys("abcd@gmail.com");
        password.sendKeys("abcdefghlkjl");
        System.out.println("Text Field Set");

        // Deleting values in the text box
        email.clear();
        password.clear();
        System.out.println("Text Field Cleared");

        // Find the submit button
        WebElement login = driver.findElement(By.id("SubmitLogin"));

        // Using click method to submit form
        email.sendKeys("abcd@gmail.com");
        password.sendKeys("abcdefghlkjl");
        login.click();
        System.out.println("Login Done with Click");

        // Using submit method to submit the form. Submit used on password field
        driver.get(baseUrl);
        driver.findElement(By.id("email")).sendKeys("abcd@gmail.com");
        driver.findElement(By.name("passwd")).sendKeys("abcdefghlkjl");
        driver.findElement(By.id("SubmitLogin")).submit();
        System.out.println("Login Done with Submit");

        // driver.close();
    }
}

Troubleshooting

If you encounter NoSuchElementException() while finding elements, the element is not present in the page at the moment WebDriver accessed it.

1. Recheck your locator using FirePath or the Inspect Element option in Chrome.
2. Check whether the value used in the code differs from the current value of the element seen in FirePath.
3. Some attributes are dynamic for certain elements. If a value changes dynamically, switch to By.xpath() or By.cssSelector(), which are more reliable but slightly more complex.
4. Sometimes the issue is a wait condition; WebDriver may execute the code before the page finishes loading.
5. Add a wait before findElement() using implicit or explicit waits.

Summary

• The table below summarizes the commands to access each type of element discussed above.

• WebDriver allows selection of more than one option in a multiple SELECT element.
• You can use the submit() method on any element within the form. WebDriver automatically triggers the submit function of the form that the element belongs to.

FAQs