How to clear all content in html text box using Selenium?

Selenium is one of the most popular tools out there when it comes to automating web applications. Selenium is widely used for automating user interactions like filling out the forms, clicking on buttons, or navigating to a page. Selenium provides a programmable interface where users can write automated scripts and interact with the web browser.

Textboxes are the input boxes in HTML that are used to take input from the users. Text boxes are widely used in web forms for taking inputs such as email ID, password, feedback, mobile numbers, and other information in text.

While we are dealing with web forms it’s very common to interact with text boxes and sometimes the textbox, we want to interact with is already filled with some default values, so we have to clear out the content of the text box to use it.

So, in this article, I’ll show you a step-by-step tutorial on how to clear all content in an HTML text box using Selenium.

Prerequisites:

Before we learn how to clear all content in the HTML text box using Selenium make sure you have

1. Python is installed in your system.
2. Selenium library installed using ‘pip install selenium’.

Steps to clear all content in the HTML text box using Selenium:

Step 1. Installed the necessary libraries:

We’ll need to import the web Driver library from Selenium. Web Driver is an essential component of Selenium which allows us to interact with the web browsers programmatically.

We’ll also need to import by class from Selenium Web Driver. By is a class used in selenium that provides a mechanism through which we can easily locate an element on a web page.

Python

# code
from selenium import webdriver
from selenium.webdriver.common.by import By

Step 2. Initializing the Web Driver and navigating to the web page:

In this step we’ll need to initialize the Web Driver and navigate to the web page. In this article we’ll use Google Chrome Browser.

Python

from selenium import webdriver
from selenium.webdriver.common.by import By

driver=webdriver.Chrome()
url="https://www.google.com/search?q=Geeks+For+Geeks" #Replace this with your url
driver.get(url)

In this article we’ll clear the content of this textbox using Selenium:

How to clear all content in html text box using Selenium?

Step 3. Locating the Text Box:

In this step we’ll locate the text box using appropriate Locating Strategy. Locating Strategies are a set of methods used to identify and locate an element on a web page.

For this textbox we’ll use NAME attribute to locate the text box in Selenium as it has a name attribute of “q”

To know more about Locating Strategies in Selenium refer Locator Strategies – Selenium Python.

Python

from selenium import webdriver
from selenium.webdriver.common.by import By

driver=webdriver.Chrome()
url="https://www.google.com/search?q=Geeks+For+Geeks"
driver.get(url)
textbox=driver.find_element(By.NAME,"q")

Step 4. Clearing the Content In Text Box:

There are three ways to clear the content in Text Box using Selenium. These methods are called upon the located element text box element to clear its content, they are:

• Using Clear() Method
• Using Keys Class
• Using Action class

Using the Clear() Method:

The clear() method provides a simple and straightforward approach to clear the contents of a texts.

Python

from selenium import webdriver
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver.common.by import By

driver=webdriver.Chrome()
url="https://www.google.com/search?q=Geeks+For+Geeks"
driver.get(url)
textbox=driver.find_element(By.NAME,"q")
textbox.clear()

Output:

How to clear all content in html text box using Selenium?

Using the Keys Class:

Keys is a special class in Selenium which is used to stimulate the keyboard interactions in selenium. keys class provides a set of Special Keys which we can use as a single key or as combination with other keys to stimulate keyboard interacts.

Before using the Keys Class we’ll have to import keys from selenium webdriver import Keys. Make sure to add this line in the imports.

from selenium.webdriver import Keys

For clearing the content of a textbox we’ll have to use the BACKSPACE key

textbox.send_keys(Keys.BACKSPACE)

But sending a single BACKSPACE key will only remove a single character from the input box so we’ll use a for loops starting from range 0 to length of textbox and send a BACKSPACE key.

Python

from selenium import webdriver
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver import Keys
from selenium.webdriver.common.by import By


driver=webdriver.Chrome()
url="https://www.google.com/search?q=Geeks+For+Geeks"
driver.get(url)
textbox=driver.find_element(By.NAME,"q")

len_of_textbox=len(textbox.text)

for i in range(len_of_textbox):
    textbox.send_keys(Keys.BACKSPACE)

Output:

How to clear all content in html text box using Selenium?

Using the Action Class:

Action class is a special class in Selenium which allows it perform keyboard and mouse interactions such double clicking on an element, selecting all the text and other complex interactions on a web page.

But before using the Actions class we’ll first have to import Action Chains class and Keys class from selenium

from selenium.webdriver import Keys, ActionChains

Step 1. Now first we initialize the Action Chains class.

actions=ActionChains(driver)

Step 2. Then we’ll use the actions object to focus on the located textbox using click() method. Click() method is used to click on a located element on a web page.

actions.click(textbox)

Step 3. In this step we’ll step send multiple keys to select all the text in the text box and delete it.

• actions.key_down(Keys.CONTROL)- Press the control key.
• actions.send_key(“a”) – To press A on a keyboard.
• CTRL+ A is shortcut to select on all the text on a section.
• actions.keys_up(Keys.CONTROL) –To release the control Key.
• actions.send_key(Keys.DELETE) –To press the delete key to remove all the selected key.

Python

from selenium import webdriver
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver import Keys, ActionChains
from selenium.webdriver.common.by import By


driver=webdriver.Chrome()
url="https://www.google.com/search?q=Geeks+For+Geeks"
driver.get(url)
textbox=driver.find_element(By.NAME,"q")

actions=ActionChains(driver)
actions.click(textbox)

actions.key_down(Keys.CONTROL).send_keys("a").key_up(Keys.CONTROL).send_keys(Keys.DELETE)

actions.perform()

Output:

How to clear all content in html text box using Selenium?

Conclusion:

Selenium is a useful tool when it comes to automating user interaction and know how to clear content of a html content will sure aid in interacting with web forms. You can clear the content of the html text box using any of the three methods.clear() method provides a simple and straight-forward way to clear all the content of the textbox, Keys class and Action Class are more advanced methods which gives more flexibility to your automation needs. Choose the methods fits your scenario and enhances the reliability of your automation script.