Selenium Form WebElement: TextBox, Submit Click Button 2024

What We Are Learn:

Selenium Form WebElement: In our post, we have seen how to locate single and multiple elements with the help of Findelement and Findelements. Now, in this post, we can access the various elements of a web form. As we know, for better looks at the online web pages we use in a form, we can add various elements like Text boxes, Password fields, Checkboxes, Radio buttons, dropdowns, file inputs, etc.

So, let’s know how we can deal with those elements with the help of Selenium WebDriver with Java. As in our previous post, WebDriver treated every element as an object of WebElement. So here, we will see how to handle those elements and different available methods that help access those elements of a form.

Selenium Form WebElement

If you have not taken a look at our article regarding how you can locate elements on a web page with the help of Findelement and Findelements, then we recommend reading the article first and, after that, reading this article so that you can easily understand the how we have used those methods. If you have read that article, then we can start with real-time examples of form elements like the below:

How to Handle Input Box
How you Can enter Value in a Text Box
How you can Delete the Values of a Text Box
How to Deal With Buttons

How to Handle Input Box

We use Input Box to receive the data from the outer worlds. There are two types of input boxes are present, that is:

Text Fields: This type of text box will accept the value and also display the value to the user
Password Text Box: This type of text box will accept the value but display those values in special characters to avoid displaying sensitive values.

To locate input box type elements, you can use the Findelement methods with different locators like By.id(), By.name(), By.xpath(), and By.CSSSelector(), etc.

How can you enter data into the Input Box?

After locating the element uniquely, we can use a special method that helps us enter the specific data with the help of the sendkeys() method. Let’s see the below example of how we can enter data into the text box.

package com.selenium.practice.commomMethods;

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

public class SendKeysMethodEx 
{
   public static void main(String[] args) throws InterruptedException 
   {
      WebDriver driver;
      System.setProperty("webdriver.chrome.driver","Path Of Browser Driver");

      driver=new ChromeDriver();
      driver.manage().window().maximize();
      driver.get("https://softwaretestingo.blogspot.com/2020/08/css-selector-adv-example.html");
      
      driver.findElement(By.id("username")).sendKeys("SoftwareTestingo");
      Thread.sleep(5000);
      driver.close();
   }
}

Deleting Values in Input Boxes

Similarly, the sendkeys() method clears the data in a text box. For that, first, we need to identify the elements uniquely. After that, we have to call the clear() method. This method does not require any parameters like the sendkeys() method. you can see the below example for the code snippet:

package com.selenium.practice.commomMethods;

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

public class ClearMethodEx 
{
   public static void main(String[] args) throws InterruptedException 
   {
      WebDriver driver;
      System.setProperty("webdriver.chrome.driver","Path Of Browser Driver");

      driver=new ChromeDriver();
      driver.manage().window().maximize();
      driver.get("https://softwaretestingo.blogspot.com/2020/08/css-selector-adv-example.html");
      
      driver.findElement(By.id("username")).sendKeys("SoftwareTestingo");
      System.out.println("SoftwareTestingo Typed In Username Textbox");
      Thread.sleep(5000);
      driver.findElement(By.id("username")).clear();
      System.out.println("UserName Textbox Cleared");
      Thread.sleep(5000);
      driver.close();
   }
}

How to Deal with Buttons

To access the button, we can take the help of any of the below two methods

Click(): You can use this method to click a button on a web application. click() method will work on any of this elements type like type=”button” or type=”submit”.

package com.selenium.practice.commomMethods;

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

public class ClickEx 
{
   public static void main(String[] args) throws InterruptedException 
   {
      WebDriver driver;
      System.setProperty("webdriver.chrome.driver","Path Of Browser Driver");

      driver=new ChromeDriver();
      driver.manage().window().maximize();
      driver.get("https://softwaretestingo.blogspot.com/2020/08/submit-click.html");
      
      driver.findElement(By.id("fname")).sendKeys("SoftwareTestingo");
      driver.findElement(By.id("lname")).sendKeys("Testing Blog");
      System.out.println("First Name & Last Name Filled");
      Thread.sleep(5000);
      driver.findElement(By.xpath("//button[contains(text(),'Reset')]")).click();
      System.out.println("Reset Button Clicked");
      Thread.sleep(5000);
      driver.close();
   }
}

Submit(): If you have looked at the element tab of the console and if you have found the type=”submit,” then, in that case, the submit() method is a very good alternative to the click method.

package com.selenium.practice.commomMethods;

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

public class SubmitEx 
{
   public static void main(String[] args) throws InterruptedException 
   {
      WebDriver driver;
      System.setProperty("webdriver.chrome.driver","Path Of Browser Driver");

      driver=new ChromeDriver();
      driver.manage().window().maximize();
      driver.get("https://softwaretestingo.blogspot.com/2020/08/submit-click.html");
      
      driver.findElement(By.id("fname")).sendKeys("SoftwareTestingo");
      driver.findElement(By.id("lname")).sendKeys("Testing Blog");
      System.out.println("First Name & Last Name Filled");
      Thread.sleep(5000);
      driver.findElement(By.xpath("//button[contains(text(),'Submit')]")).submit();
      System.out.println("Submit Button Clicked");
      Thread.sleep(5000);
      driver.close();
   }
}

Note:

If any form button does not have the type=”submit”, the submit() will not work.
If the button is not inside the <form> tag, then the submit() method will not work.

Difference between Click()and Submit()

Click()	Submit()
You can use the .click() method to click on any button. There is no restriction for click buttons.	We can use the .submit() method to submit the form only after a click on the button.
That means the element type = “button” or type = “submit”, .click() method will work for both.	That means the element’s type = “submit” and the button should be inside <form> tag, then only submit() will work.
If the button is inside <form> tag or the button is outside <form> tag, the click() method will work.	If the element’s type = “button,” submit() will not work. If the button outside of the <form> tag means submit() will not work
When you perform a Click operation on an element, it causes a new page to load and discard all references to this element, and any further operations performed on this element will throw a StaleElementReferenceException.	If this current element is a form or an element within a form, then this will be submitted to the remote server. If this causes the current page to change, this method will block until the new page is loaded.

Selenium Form WebElement: TextBox, Submit Button