Selenium WebDriver - Handling Forms

Quiz

Selenium Webdriver can be used to handle forms on a web page. In HTML terminology, a form element is identified by the tagname called Form. Also, it should have the feature to submit the form, the element used for form submission should have the tagname called input along with attribute type having the value as submit. It must be noted that a form on a web page may contain text boxes, links, checkboxes, radio buttons, and other web elements that would help the user to input details on a web page.

Identification of Forms on Web Page

Right click on a page, opened in the Chrome browser. Click on the Inspect button. Post that, the HTML code for the entire page would be visible. For investigating a form element on a page, click on the left upward arrow, available to the top of the HTML code as highlighted below.

Once, we had clicked and pointed the arrow to any element inside the form (for example, the Register Button), its HTML code was available, reflecting the form tagname.

In the above form, we can submit it with details, using the Register button. Once, we had clicked and pointed the arrow to the Register button, its HTML code appeared, reflecting the input tagname, and its type attribute having the value submit.

<input type="submit" class="btn btn-primary" value="Register">

We can submit a form with the help of the methods - submit() and click(). The basic difference between a normal button and submit button is that, a normal button can be interacted only with the click() method but the submit button can be interacted with both click() and submit() method.

Syntax

Syntax with submit method −

WebDriver driver = new ChromeDriver();

// identify input box 1
WebElement inputBx = driver.findElement
   (By.xpath("<value of xpath>"));
inputBx.sendKeys("Selenium");

// submit form
WebElement btn = driver.findElement
   (By.xpath("<value of xpath>"));
btn.submit();

Also, the normal button has the input tagname, and its type attribute should be the value button. In the below page, let us see the HTML code of the Click Me button on a web page.

<button type="button" class="btn btn-primary" 
   onclick="showDiv()">Click Me</button>

Example 1 - Using submit() Method

Let us take an example of the form in the below page, which contains the web elements - label, input box, button, password, and so on.

Syntax

WebDriver driver = new ChromeDriver();

// identify input box 1
WebElement inputBx = driver.findElement
   (By.xpath("<value of xpath>"));
inputBx.sendKeys("Selenium");

// get value entered
System.out.println("Value entered in FirstName: " + inputBx.getAttribute("value"));

// identify input box 2
WebElement inputBx2 = driver.findElement
   (By.xpath("<value of xpath>"));
inputBx2.sendKeys("Tutorials");

// get value entered
System.out.println("Value entered in LastName: " + inputBx2.getAttribute("value"));

// identify input box 3
WebElement inputBx3 = driver.findElement
   (By.xpath("<value of xpath>"));
inputBx3.sendKeys("Tutorialspoint");

// identify input box 4
WebElement inputBx4 = driver.findElement
   (By.xpath("<value of xpath>"));
inputBx3.sendKeys("Tutorialspoint");

// submit form
WebElement btn = driver.findElement
   (By.xpath("<value of xpath>"));
btn.submit();

Code Implementation

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

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

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will identify form
      driver.get("https://www.tutorialspoint.com/selenium/practice/register.php");

      // identify input box 1
      WebElement inputBx = driver.findElement(By.xpath("//*[@id='firstname']"));
      inputBx.sendKeys("Selenium");

      // get value entered
      System.out.println("Value entered in FirstName: " + inputBx.getAttribute("value"));

      // identify input box 2
      WebElement inputBx2 = driver.findElement(By.xpath("//*[@id='lastname']"));
      inputBx2.sendKeys("Tutorials");

      // get value entered
      System.out.println("Value entered in LastName: " + inputBx2.getAttribute("value"));

      // identify input box 3
      WebElement inputBx3 = driver.findElement(By.xpath("//*[@id='username']"));
      inputBx3.sendKeys("Tutorialspoint");

      // get value entered
      System.out.println("Value entered in UserName: " + inputBx3.getAttribute("value"));

      // identify input box 4
      WebElement inputBx4 = driver.findElement(By.xpath("//*[@id='password']"));
      inputBx3.sendKeys("Tutorialspoint");

      // submit form with submit method
      WebElement btn = driver.findElement(By.xpath("//*[@id='signupForm']/div[5]/input"));
      btn.submit();

      // Close browser
      driver.quit();
   }
}

Output

Value entered in FirstName: Selenium
Value entered in LastName: Tutorials
Value entered in UserName: Tutorialspoint

Process finished with exit code 0

In the above example, we had filled the form having the input boxes then obtained the value entered (except the password field) with the message in the console - Value entered in FirstName: Selenium, Value entered in LastName: Tutorials, and Value entered in UserName: Tutorialspoint.

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Example 2 - Using click() Method

Let us take another example of the form in the below page, which contains the web elements like the label, input box, button, password, and so on.

Syntax

Syntax with click() method −

WebDriver driver = new ChromeDriver();

// identify input box 1
WebElement inputBx = driver.findElement(By.xpath("<value of xpath>"));
inputBx.sendKeys("Selenium");

// get value entered
System.out.println("Value entered in FirstName: " + inputBx.getAttribute("value"));

// identify input box 2
WebElement inputBx2 = driver.findElement(By.xpath("<value of xpath>"));
inputBx2.sendKeys("Selenium");

// submit form
WebElement btn = driver.findElement(By.xpath("<value of xpath>"));
btn.click();

Code Implementation

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

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

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will identify form
      driver.get("https://www.tutorialspoint.com/selenium/practice/login.php");

      // identify input box 1
      WebElement inputBx = driver.findElement(By.xpath("//*[@id='email']"));
      inputBx.sendKeys("Selenium");

      // get value entered
      System.out.println("Value entered in Email: " + inputBx.getAttribute("value"));

      // identify input box 2
      WebElement inputBx2 = driver.findElement(By.xpath("//*[@id='password']"));
      inputBx2.sendKeys("Tutorials");

      // submit form with click() method
      WebElement btn = driver.findElement(By.xpath("//*[@id='signInForm']/div[3]/input"));
      btn.click();

      // Closing browser
      driver.quit();
   }
}

Output

Value entered in Email: Selenium

In the above example, we had filled out the form having the input boxes then obtained the value entered (except the password field) with the message in the console - Value entered in Email: Selenium.

Conclusion

This concludes our comprehensive take on the tutorial on Selenium WebDriver Handling Forms. Weve started with describing identification of forms on a web page, and walked through examples on how to handle forms with Selenium Webdriver. This equips you with in-depth knowledge of the Selenium WebDriver Handling Forms. It is wise to keep practicing what youve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.

Print Page