Accessing Form and its Elements

In this tutorial, we will learn how to access different elements of a form using Selenium WebDriver. A form consists of various elements like text box, email field, password field, text area, radio buttons, checkbox, dropdowns, links, etc.

Let us learn how to interact with all these web elements and actions which can be performed

• Input  Box – It consists of either a text field or an email field or a password field. The action which we can perform in a text box are:
• Passing Text – method used is sendKeys(“String”);

WebElement oUsername;
oUsername = oBrowser.findElement(By.id("u_0_1"));
//To clear the text
oUsername.clear();
//To enter string value in a text field
oUsername.sendKeys("Saurabh");

• Clearing Text – method used is clear();

• Radio Button – Radio button allows you to select one option out of many. The Action which can be performed on a radio button is click().

//To select a radio button - click() method is used
Driver.findElement(By.id("u_0_f")).click();

• Checkbox – Checkbox allows multiple selections as well. A checkbox can be toggled ON/OFF by click() method.

//To toogle a checkbox - click method is used
Driver.findElement(By.xpath("//input[@type='checkbox']")).click();

• Links – Links in html are hyperlinks, clicking on a link will navigate you to another page or document. Links are covered in detail in another tutorial Working with Link.
• Dropdown – Dropdown is a web element which gives us many options to select from. Dropdown in HTML is represented by Select tag, and its elements are represented by option tag. Dropdown topic is covered in detail in another topic Working with Dropdown
• Buttons – There are used to submit a form. Actions that can be performed on a button are click() and submit().

//To submit a button either click() or submit method is used

Driver.findElement(By.id("gh-btn")).click();
                 //or
Driver.findElement(By.id("gh-btn")).submit();

Practical Scenario: Sign-up form of Facebook

Scenario:

1. Open any browser of your choice say chrome.
2. Navigate to http://www.facebook.com
3. Fill up the sign-up form on the home page. This sign-up form consists of web elements like email field, password field, dropdown, radio button and buttons.

Refer the below code:

package com.day3;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.ie.InternetExplorerDriver;
import org.openqa.selenium.support.ui.Select;

public class FacebookSignUp {
	
	
	WebDriver Driver;
	
	String sUrl = "http://www.facebook.com";
	
	
	public void invokeBrowser(String sBrowserType){
		
		if(sBrowserType.equalsIgnoreCase("ff")){
			Driver = new FirefoxDriver();
		} else if(sBrowserType.equalsIgnoreCase("chrome")){
			System.setProperty("webdriver.chrome.driver", "C:\\workspace\\libs\\chromedriver.exe");
			Driver = new ChromeDriver();
		} else if(sBrowserType.equalsIgnoreCase("ie")){
			System.setProperty("webdriver.ie.driver", "C:\\workspace\\libs\\IEDriverServer.exe");
			Driver = new InternetExplorerDriver();
		} else {
			System.err.println("Invalid Browser type.. setting default browser as Firefox Driver");
			Driver = new FirefoxDriver();
		}
		
		
		// To Maximize the window
		Driver.manage().window().maximize();
		
		Driver.manage().deleteAllCookies();
		
		Driver.manage().timeouts().pageLoadTimeout(60, TimeUnit.SECONDS);
		
		Driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
		
		Driver.get(sUrl);
		
		
		Utils.waitFor(2l);
		
	}
	
	public void facebookSineUp(){
		
		//filling in First name field 
		WebElement oUsername;
		oUsername = Driver.findElement(By.id("u_0_1"));
		oUsername.sendKeys("Saurabh");
		
		//filling in Surname field
		Driver.findElement(By.name("lastname")).sendKeys("Dhingra");
		
		//Filling in Email Id
		Driver.findElement(By.id("u_0_6")).sendKeys("saurabh@gmail.com");
		
		//Filling in re-enter email id
		Driver.findElement(By.id("u_0_9")).sendKeys("saurabh@gmail.com");
		
		//Filling in new password field
		Driver.findElement(By.name("reg_passwd__")).sendKeys("saurabh1234");
		
		//Selecting the day from dropdown
		WebElement oDateDd = Driver.findElement(By.id("day"));
		
		Select oDate = new Select(oDateDd);
		
		oDate.selectByVisibleText("21");
		
		//Selecting Month from the dropdown
		Select oMonth = new Select(Driver.findElement(By.id("month")));
		
		oMonth.selectByValue("6");
		
		//Selecting year from the dropdown
		Select oYear = new Select(Driver.findElement(By.id("year")));
		
		oYear.selectByVisibleText("1986");
		
		//Selecting a radio button
		Driver.findElement(By.id("u_0_f")).click();
		
		//Click on Submit button
		Driver.findElement(By.id("u_0_j")).click();
		
	}
	
	public void closeBrowser(){
		Driver.close();
	}

}

This was the basic introduction to form elements, going forward we will learn all these elements in detail with many practical scenarios.

For any questions, queries or comments feel free to write us at support@qatechhub.com or saurabh@qatechub.com. Happy Learning ?