Handling WebElement :: TEXTBOX

Hello Folks,

We have learnt basic concepts of Selenium webdriver. From this post onward, I will cover the concepts of handling different types of web elements. We will start with Text Box. Topic will be covered in this post:

  1. What is text box and how to create it.
  2. How to type in a text box.
  3. How to retrieve value from text box.
  4. How to clear a text box using method.
  5. How to clear a text box using keys simulation.

What is a TextBox:

HTML has a tag named  “<input>” which specifies an input field where the user can enter data. There are many input types such as textbox, buttons, checkbox, radio buttons etc.

To create a different type of input fields,  we need to specify  value of  “type” attribute of input tag to specify which type of input field it is.

For example: To create a textbox we need to provide type as “text”.

HTML code to create textbox:

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname">

If we save above code with <some_name>.html and open it in any web browser , it will look like as below:

There are so many attributes which you can use to customize text box. But that we are not going to learn. Basic idea about html elements are enough.

Now we will perform different types of operations on a text box. Let’s start:-

We will use demoqa.com for our examples. A big thanks to Mukesh Otwani and Lakshya Sharma for allowing me to use this website.

Typing in to a text box:

To type in to a text box, Selenium provides a method called sendKeys(). 

Syntax:  void sendKeys(java.lang.CharSequence… keysToSend)

This method can be used to  simulate typing into an element, which may set its value. It takes below parameter:

keysToSend – character sequence to send to the element

Before we use above method, we need to locate text box to type. Let’s locate first. Go to “http://demoqa.com/registration/” and inspect “First Name” text box.

HTML code of “First Name” textbox has id in it. So we can locate it using its id.

Java code:

driver.get("http://demoqa.com/registration/");
WebElement firstNameTextbox= driver.findElement(By.id("name_3_firstname"));
firstNameTextbox.sendKeys("Amod");

Note: sendKeys() append the values if some input is already present in text box. Suppose, first name text box has entry already say “Amod”. If we type text through sendKeys say “Mahajan”, it will not clear “Amod” and will append to it. So, final typed text will be “AmodMahajan”.

Getting typed value from text box:

We can retrieve value which we have typed or already typed in text box. It will be useful when we want to verify if correct value is typed or to know existing value in text box.

To retrieve value from text box, we need to use getAttribute() method.

Let’s learn about important method getAttribute():

                 String getAttribute(java.lang.String name)

  • It returns current value of given attribute of HTML element in form of String.
  • More exactly, this method will return the value of the property with the given name, if it exists. If it does not, then the value of the attribute with the given name is returned. If neither exists, null is returned.
  • When we type any input in a text box, it is set as a attribute named “value”. So, if we want to read value from a text box we need too use below syntax:<
    firstNameTextbox.getAttribute("value");

Clear a filled text box:

We have seen above that sendKeys() method append the new value with old values. If we do not want that, we need to clear it first. Selenium provides a method called clear() to perform this.

Syntax: firstNameTextbox.clear();

We have another way of achieving same. We can simulate keys also. Manually we use ctrl+A and delete. Same we can send using sendKeys() method.

Syntax: firstNameTextbox.sendKeys(Keys.chord(Keys.CONTROL,”a”,Keys.DELETE));

Complete Java Program:


package MakeSeleniumEasy;

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

public class TextBox {

	public static void main(String[] args) {
		
		System.setProperty("webdriver.chrome.driver", "./exefiles/chromedriver.exe");
		//Opening chrome browser
		WebDriver driver= new ChromeDriver();
		//loading url
		driver.get("http://demoqa.com/registration/");
		// locating first name text box
		WebElement firstNameTextbox= driver.findElement(By.id("name_3_firstname"));
		// typing name in first name text box
		firstNameTextbox.sendKeys("Amod");
		// retrieving typed value from text box
		String typedValue= firstNameTextbox.getAttribute("value");
		System.out.println("We typed: "+typedValue);
		// clearing value using clear method
		firstNameTextbox.clear();
		String typedValueAfterClear= firstNameTextbox.getAttribute("value");
		System.out.println("Value after clear: "+typedValueAfterClear);
		firstNameTextbox.sendKeys("Amod");
		// clearing again using keys simulation
		firstNameTextbox.sendKeys(Keys.chord(Keys.CONTROL,"a",Keys.DELETE));
		// closing browser
		driver.quit();
		
		
	}
}

So, we have seen basic operations on a text box which can be performed. If you have any doubt or want to know specific things, please let me know through comment.

If you like my posts, please like, comment, share and subscribe.

Thank You.

#HappyLearning

Author: Amod Mahajan

My name is Amod Mahajan and I am an IT employee with 4+ years of experience in Software testing and staying in Bengaluru. My area of interest is Automation testing. I started from basics and went throw so many selenium tutorials. Thanks to Mukesh Otwani as his tutorials are easy and cover basics to advance. I have habit of exploring concepts by deep diving. I used to make notes. I thought of sharing my knowledge through posts and now I am here. #KeepLearning #ShareLearning