What are Form WebElement?

Forms are the fundamental web elements to receive information from the website visitors. Web forms have different GUI elements like Text boxes, Password fields, Checkboxes, Radio buttons, dropdowns, file inputs, etc.

We will see how to access these different form elements using Selenium Web Driver with Java. Selenium encapsulates every form element as an object of WebElement. It provides API to find the elements and act on them like entering text into text boxes, clicking the buttons, etc. We will see the methods that are available to access each form element.

In this tutorial, we will see how to identify the following form elements

  • Introduction to WebElement, findElement(), findElements()
  • Input Box
  • Entering Values in Input Boxes
  • Deleting Values in Input Boxes
  • Buttons
  • Submit Buttons
  • Complete Code

Introduction to WebElement, findElement(), findElements()

Selenium Web Driver encapsulates a simple form element as an object of WebElement. There are various techniques by which the WebDriver identifies the form elements based on the different properties of the Web elements like ID, Name, Class, XPath, Tagname, CSS Selectors, link Text, etc.

Web Driver provides the following two methods to find the elements.

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

Let’s see a simple code to understand findElement() to identify text field using WebElement.

package tests;

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

public class WebElementFindElement {

    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "Chrome exe path");
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();

        driver.get("https://rahulshettyacademy.com/AutomationPractice/");
        //Code to find element using id and send values in text field.
        driver.findElement(By.id("name")).sendKeys("Rahul Shetty");
        //Close chrome driver
        driver.close();
    }
}

Input Box

Input boxes refer to either of these two types:

  1. Text Fields- text boxes that accept typed values and show them as they are.
  2. Password Fields- text boxes that accept typed values but mask them as a series of special characters (commonly dots and asterisks) to avoid sensitive values to be displayed.

Let us see a simple code to understand Input box for text fields and password fields.


package tests;

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

public class InputBoxDemo {

public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "Chrome exe path");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();

driver.get("https://www.facebook.com/");
//Code to find element using id and send values in text field.
driver.findElement(By.id("email")).sendKeys("Rahul Shetty@rahulshettyacademy.com");
driver.findElement(By.id("pass")).sendKeys("123456789");
//Close chrome driver
driver.close();
       }
}

sendKeys in Selenium

sendkeys() in Selenium is a method used to enter editable content in the text and password fields during test execution. These fields are identified using locators like name, class, id, etc. It is a method available on the web element. Unlike the type method, sendkeys() method does not replace existing text in any text box.

Entering values in Input Boxes

To enter text into the Text Fields and Password Fields, sendKeys() is the method available on the WebElement.

Using the same example of https://www.facebook.com/ site, here is how we find the Text field and Password fields and enter values into them.


package tests;

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

public class InputBoxDemo {

public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "Chrome exe path");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();

driver.get("https://www.facebook.com/");
//Code to find element using id and send values in text field.
driver.findElement(By.id("email")).sendKeys("Rahul Shetty@rahulshettyacademy.com");
driver.findElement(By.id("pass")).sendKeys("123456789");
//Close chrome driver
driver.close();
    }
}

Deleting values in input boxes

The clear() method is used to delete the text in an input box. This method does not need a parameter. The code snippet below will clear out the text from the Email or Password fields.

package tests;

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

public class InputBoxDemo {

public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "Chrome exe path");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();

driver.get("https://www.facebook.com/");
//Code to find element using id and send values in text field.
driver.findElement(By.id("email")).clear();
driver.findElement(By.id("pass")).clear();
//Close chrome driver
driver.close();
    }
}

Buttons

The buttons can be accessed using the click() method.

Let us see an example where we are entering details and clicking on submit button to navigate to next page.

package tests;

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

public class SubmitButton {

public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "Chrome exe path");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();

driver.get("https://rahulshettyacademy.com/AutomationPractice/");
//Code to find element using id and send values in text field.
driver.findElement(By.id("name")).sendKeys("Rahul Shetty");
driver.findElement(By.id("alertbtn")).click();
//Close chrome driver
driver.close();
     }
}

Submit buttons

Submit buttons are used to submit the entire form to the server. We can either use the click () method on the web element like a normal button as we have done above or use the submit () method on any web element in the form or on the submit button itself.

When submit() is used, WebDriver will look up the DOM to know which form the element belongs to, and then trigger its submit function.

Let us check example with code for submit button.

package tests;

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

public class SubmitButton {

public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "Chrome exe path");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();

driver.get("https://rahulshettyacademy.com/AutomationPractice/");
//Code to find element using id and send values in text field.
driver.findElement(By.id("name")).sendKeys("Rahul Shetty");
driver.findElement(By.id("alertbtn")).submit();
//Close chrome driver
driver.close();
     }
}

Complete Code

Let us take one complete code for all the above things we have gone through in this article.

package tests;

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

public class LoginTestCase {

public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "Chrome exe path");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();

driver.get("https://rahulshettyacademy.com/AutomationPractice/");
//Code to find element using id and send values in text field.
WebElement email = driver.findElement(By.id("email"));
WebElement password = driver.findElement(By.id("pass"));
WebElement login = driver.findElement(By.id("u_0_i"));

//code to send keys to edit box
email.sendKeys("Rahul Shetty");
password.sendKeys("1234567");

//code to clear edit box.
email.clear();
password.clear();

//code to send keys to edit box and click on login button.
email.sendKeys("rahul shetty");
password.sendKeys("0987654321");

//code to press login button using submit()
login.submit();

//Close chrome driver
driver.close();
     }
}

Summary

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

Element

Command

Description

Input Box

sendKeys()

used to enter values onto text boxes

clear()

used to clear text boxes of its current value

Links

click()

used to click on the link and wait for page load to complete before proceeding to the next command.

Submit Button

submit()




Tags


You may also like

API Basics and Architecture

API Basics and Architecture
Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}