How To Type, Retrieve and Clear values from the Text box and Text Area in Selenium WebDriver

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.

What is a TextBox?

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.

A sample text box in HTML

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.

What is a Text Area?

As per MDN – The HTML </code> element</strong> 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.</p> <p>A sample text area looks as below:-</p> <figure class="wp-block-image size-full is-resized is-style-default"> </figure> <p class="has-background has-pale-pink-background-color">Now we will perform actions on the text box and text area using Selenium WebDriver Java.</p> <h5 class="wp-block-heading">How to type a value in a text box and text area using Selenium WebDriver?</h5> <p class="has-background has-vivid-green-cyan-background-color">Interface WebElement consists of a method “<strong><em>sendKeys()</em></strong>” 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 “<strong><em>value</em></strong>” of the input box. Its method signature is as below:-</p> <p class="has-background has-pale-pink-background-color"><strong><em>void sendKeys(CharSequence… keysToSend);</em></strong></p> <p class="has-background has-pale-pink-background-color"><code>keysToSend</code> – character sequence to send to the element</p> <p class="has-background has-vivid-green-cyan-background-color">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.</p> <p class="has-background has-pale-pink-background-color">A sample program to exhibit the usage of sendKeys() for both text box and test area is below:-</p> <pre class="wp-block-preformatted">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("amod@gmail.com"); // 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"); } } </pre> <h4 class="wp-block-heading">Output</h4> <figure class="wp-block-image size-full is-resized is-style-default"> </figure> <p class="has-background has-vivid-green-cyan-background-color">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.</p> <pre class="wp-block-preformatted">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("amod@gmail.com"); userEmail.sendKeys("animesh@gmail.com"); // 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"); } } </pre> <h4 class="wp-block-heading">Output:-</h4> <figure class="wp-block-image size-full is-resized is-style-default"> </figure> <p class="has-background has-vivid-green-cyan-background-color">To clear typed value from a text box or text area, we need to use a clear() method of WebElement interface.</p> <p class="has-background has-vivid-green-cyan-background-color">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.</p> <h4 class="wp-block-heading">How to retrieve the typed value from a text box and text area using Selenium WebDriver?</h4> <p class="has-background has-vivid-green-cyan-background-color">If you observed the definition given by Selenium Documentation about sendKeys() method, it states that “<strong><em>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</em></strong> HTML element, we need to use getAttribute(string attributeName). The same method will work for both the text boxes and text areas.</p> <p class="has-background has-pale-pink-background-color">Let’s learn about important method getAttribute():</p> <p><strong> String getAttribute(java.lang.String name)</strong></p> <ul> <li>It returns the current value of the given attribute of HTML element in the form of String.</li> <li>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.</li> <li>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.</li> </ul> <p class="has-background has-pale-pink-background-color">To learn more about getAttribute() method, refer to this <a href="/2017/05/16/method-1-getattribute-why-what-and-how-to-use/">post</a>.</p> <pre class="wp-block-preformatted">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("amod@gmail.com"); userEmail.sendKeys("animesh@gmail.com"); 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(); } } </pre> <h4 class="wp-block-heading">Output</h4> <pre class="wp-block-preformatted">Full name : Amod MahajanAnimesh Prashant Email address :amod@gmail.comanimesh@gmail.com Current address : Bengaluru Permanent address : Bihar </pre> <p class="has-background has-vivid-green-cyan-background-color">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.</p> <h4 class="wp-block-heading">How to clear the typed value from a text box and text area using Selenium WebDriver?</h4> <p class="has-background has-vivid-green-cyan-background-color">WebElement interface provides a method called clear() which resets value attribute of web element on which it is called.</p> <p class="has-background has-pale-pink-background-color">firstNameTextBox.clear();</p> <p>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.</p> <p class="has-background has-pale-pink-background-color">firstNameTextbox.sendKeys(Keys.chord(Keys.CONTROL,”a”,Keys.DELETE));</p> <p>You can download/clone above sample project from here.</p> <p>If you have any doubt, feel free to comment below.<br> If you like my posts, please like, comment, share and subscribe.<br> #ThanksForReading<br> #HappyLearning</p> <p>Find all Selenium related posts <a href="/home/seleniumbytopic/">here</a>, all API manual and automation related posts <a href="/api-testing/">here</a>, and find frequently asked Java Programs <a href="/java-programs/">here</a>.</p> <p>Many other topics you can navigate through the menu.</p> </div> <footer class="entry-footer"> <div class="entry-footer-right"></div> <span class="cat-links">Posted in: <a href="/category/selenium-topics/" rel="category tag">Selenium Topics</a></span> </footer> </article> <nav class="navigation post-navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"> <div class="nav-previous"> <a href="/2017/05/10/all-ways-of-refreshing-a-webapge-in-selenium/" rel="prev">← All Ways Of Refreshing a Webapge In Selenium</a> </div> <div class="nav-next"> <a href="/2017/05/16/method-1-getattribute-why-what-and-how-to-use/" rel="next">getAttribute() method in Selenium WebDriver – Why, What and How to use? →</a> </div> </div> </nav> <div id="comments" class="comments-area"> <h2 class="comments-title">3 thoughts on <span>“How To Type, Retrieve and Clear values from the Text box and Text Area in Selenium WebDriver”</span> </h2> <ol class="comment-list"> <li id="comment-2353" class="comment even thread-even depth-1"> <article id="div-comment-2353" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt="" src="https://secure.gravatar.com/avatar/8a88efa3bf0933a36b0e5d72c282f99e?s=32&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/8a88efa3bf0933a36b0e5d72c282f99e?s=64&d=mm&r=g 2x" class="avatar avatar-32 photo" height="32" width="32" loading="lazy" decoding="async"> <b class="fn">nabila</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="/2017/05/12/handling-webelement-textbox/#comment-2353"><time datetime="2020-09-22T19:50:05-04:00">September 22, 2020 at 7:50 pm</time></a> </div> </footer> <div class="comment-content"> <p>Hi,<br> If i have two fields one contains a value and not editable and the the other field is editable and how can i send value in the editable field which is the same value that exists in the non editable (variable) one.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/2017/05/12/handling-webelement-textbox/?replytocom=2353#respond" data-commentid="2353" data-postid="1721" data-belowelement="div-comment-2353" data-respondelement="respond" data-replyto="Reply to nabila" aria-label="Reply to nabila">Reply</a> </div> </article> </li> <li id="comment-127" class="comment odd alt thread-odd thread-alt depth-1 parent"> <article id="div-comment-127" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt="" src="https://secure.gravatar.com/avatar/17cc0e31bd08b3ee829174c01a339925?s=32&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/17cc0e31bd08b3ee829174c01a339925?s=64&d=mm&r=g 2x" class="avatar avatar-32 photo" height="32" width="32" loading="lazy" decoding="async"> <b class="fn">Gaurav Khurana</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="/2017/05/12/handling-webelement-textbox/#comment-127"><time datetime="2017-06-10T13:45:12-04:00">June 10, 2017 at 1:45 pm</time></a> </div> </footer> <div class="comment-content"> <p>Thanks for covering 2 methods of clearing a textbox.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/2017/05/12/handling-webelement-textbox/?replytocom=127#respond" data-commentid="127" data-postid="1721" data-belowelement="div-comment-127" data-respondelement="respond" data-replyto="Reply to Gaurav Khurana" aria-label="Reply to Gaurav Khurana">Reply</a> </div> </article> <ol class="children"> <li id="comment-129" class="comment byuser comment-author-admin bypostauthor even depth-2"> <article id="div-comment-129" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt="" src="https://secure.gravatar.com/avatar/753104df778aa823340d0fdb25c132db?s=32&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/753104df778aa823340d0fdb25c132db?s=64&d=mm&r=g 2x" class="avatar avatar-32 photo" height="32" width="32" loading="lazy" decoding="async"> <b class="fn">Amod Mahajan</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="/2017/05/12/handling-webelement-textbox/#comment-129"><time datetime="2017-06-10T22:49:52-04:00">June 10, 2017 at 10:49 pm</time></a> </div> </footer> <div class="comment-content"> <p>Thanks Gaurav.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/2017/05/12/handling-webelement-textbox/?replytocom=129#respond" data-commentid="129" data-postid="1721" data-belowelement="div-comment-129" data-respondelement="respond" data-replyto="Reply to Amod Mahajan" aria-label="Reply to Amod Mahajan">Reply</a> </div> </article> </li> </ol> </li> </ol> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2017/05/12/handling-webelement-textbox/#respond" style="display:none;">Cancel reply</a></small> </h3> <form action="https://makeseleniumeasy.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate="" name="commentform"> <p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p> <p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="">

Name *

Email *

Website