A text box or an input box with free text is a very common web element on a web page. Generally, we type some values into a text box, retrieve typed value or delete typed values from it. A text box may also put some restrictions like a maximum length of allowed values, allowed characters or read-only, etc. There may be many more like highlighting text box for invalid values. In this post, we will focus on typing, retrieving, and deleting values from a text box.
As per MDN – The HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes. How an works varies considerably depending on the value of its type attribute. If the type is “text” then it is an input box. If the type is “button” it is a button. For this post we will consider an input tag with type as text.
First name:
Last name:
Save the above code in a file with extension as “.html”. Open the above HTML file in a browser. In fact methods used for performaing actions on a text box will work for text area as well.
As per MDN – The HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example, a comment on a review or feedback form.
A sample text area looks as below:-
Now we will perform actions on the text box and text area using Selenium WebDriver Java.
Interface WebElement consists of a method “sendKeys()” which is used to type a value in a text box and text area using Selenium WebDriver – Java. This method sets the value of the attribute “value” of the input box. Its method signature is as below:-
void sendKeys(CharSequence… keysToSend);
keysToSend – character sequence to send to the element
CharSequence is an interface which provides a readable sequence of char values. Classes like String, StringBuffer, StringBuilder implements this interface. This is the reason we are able to pass a string value as an argument in the sendKeys() method.
A sample program to exhibit the usage of sendKeys() for both text box and test area is below:-
package BasicSeleniumConcepts;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import io.github.bonigarcia.wdm.WebDriverManager;
public class SendEeysExample {
public static void main(String[] args) {
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.get("http://www.demoqa.com/text-box");
//Typing full name
WebElement fullName = driver.findElement(By.id("userName"));
fullName.sendKeys("Amod Mahajan");
// Typing email address
WebElement userEmail = driver.findElement(By.id("userEmail"));
userEmail.sendKeys("[email protected]");
// Typing current address
WebElement currentAddress = driver.findElement(By.id("currentAddress"));
currentAddress.sendKeys("Bengaluru");
// Typing permanent address
WebElement permanentAddress = driver.findElement(By.id("permanentAddress"));
permanentAddress.sendKeys("Bihar");
}
}
sendKeys() method does not clear the existing text of an input box. For example, If we type a value using sendKeys() into a text box or text area or it has already any existing values and try to type something again on same element, the previous value will not be cleared and new text will be appended to the existing one.
package BasicSeleniumConcepts;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import io.github.bonigarcia.wdm.WebDriverManager;
public class SendEeysExample {
public static void main(String[] args) {
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.get("http://www.demoqa.com/text-box");
//Typing full name
WebElement fullName = driver.findElement(By.id("userName"));
fullName.sendKeys("Amod Mahajan");
fullName.sendKeys("Animesh Prashant");
// Typing email address
WebElement userEmail = driver.findElement(By.id("userEmail"));
userEmail.sendKeys("[email protected]");
userEmail.sendKeys("[email protected]");
// Typing current address
WebElement currentAddress = driver.findElement(By.id("currentAddress"));
currentAddress.sendKeys("Bengaluru");
// Typing permanent address
WebElement permanentAddress = driver.findElement(By.id("permanentAddress"));
permanentAddress.sendKeys("Bihar");
}
}
To clear typed value from a text box or text area, we need to use a clear() method of WebElement interface.
If we call sendKeys() method on a web element where typing is not possible i.e. button then it does not throw any exception at least as of Selenium 4.0.0-alpha-6 version.
If you observed the definition given by Selenium Documentation about sendKeys() method, it states that “Use this method to simulate typing into an element, which may set its value”. “value” is an attribute of HTML element. To get the value of an attribute of an HTML element, we need to use getAttribute(string attributeName). The same method will work for both the text boxes and text areas.
Let’s learn about important method getAttribute():
String getAttribute(java.lang.String name)
- It returns the current value of the given attribute of HTML element in the 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.
- The above point is a little tricky in the case of “value” attribute. If the text box has no typed values then getAttribute(“value”) will nor return NULL. It will return a string of length zero or an empty string. NULL is returned for a non-existing attribute.
To learn more about getAttribute() method, refer to this post.
package BasicSeleniumConcepts;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import io.github.bonigarcia.wdm.WebDriverManager;
public class SendEeysExample {
public static void main(String[] args) {
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.get("http://www.demoqa.com/text-box");
//Typing full name
WebElement fullName = driver.findElement(By.id("userName"));
fullName.sendKeys("Amod Mahajan");
fullName.sendKeys("Animesh Prashant");
System.out.println("Full name : "+fullName.getAttribute("value"));
// Typing email address
WebElement userEmail = driver.findElement(By.id("userEmail"));
userEmail.sendKeys("[email protected]");
userEmail.sendKeys("[email protected]");
System.out.println("Email address :"+ userEmail.getAttribute("value"));
// Typing current address
WebElement currentAddress = driver.findElement(By.id("currentAddress"));
currentAddress.sendKeys("Bengaluru");
System.out.println("Current address : "+ currentAddress.getAttribute("value"));
// Typing permanent address
WebElement permanentAddress = driver.findElement(By.id("permanentAddress"));
permanentAddress.sendKeys("Bihar");
System.out.println("Permanent address : "+ permanentAddress.getAttribute("value"));
driver.close();
}
}
Full name : Amod MahajanAnimesh Prashant Email address :[email protected]@gmail.com Current address : Bengaluru Permanent address : Bihar
You may face multiple scenarios where getting the value of the “value” attribute does not give expected output. Developer can override this behavior. They may have another web element to hold typed value or any other attribute. You need to observe DOM to find an exact attribute or another web element that holds value.
WebElement interface provides a method called clear() which resets value attribute of web element on which it is called.
firstNameTextBox.clear();
We have another way of achieving the same. We can simulate keys also. Manually we use ctrl+A and delete. Same we can send using sendKeys() method.
firstNameTextbox.sendKeys(Keys.chord(Keys.CONTROL,”a”,Keys.DELETE));
You can download/clone above sample project from here.
If you have any doubt, feel free to comment below.If you like my posts, please like, comment, share and subscribe.#ThanksForReading
#HappyLearning