This tutorial will show you how to clear input text fields using Playwright. You’ll learn multiple ways to reset or clear input values effectively during test automation with simple code examples.
Clearing input fields in Playwright is essential to ensure your tests start with a clean slate, free from any residual or pre-filled text. When automating form interactions, one common issue is dealing with pre-filled or leftover text in input fields. In such cases, it is important to clear input text field before typing new text in it.
In this Playwright automation testing guide, we will learn how to clear input value from a text input field using different methods. You can clear text from an input field using Playwright’s built-in methods such as clear(), fill(), and keyboard simulation. Also, you can evaluate JavaScript directly to clear the input field. We will learn all these methods one by one.
Clear Input Text Using the clear() Method in Playwright
Playwright’s built-in clear() method is the simplest and most straightforward way to remove text from an input field. It’s specifically designed to clear existing values from textboxes or other input fields efficiently. To use the clear() method, you just need to locate the element and call .clear() method.
Before jumping into clearing text fields, you may want to review the Step-by-Step Playwright Guide that explains how element interaction works in general.
Let’s see how to clear input text from a text input field using the clear() method with an example.
Example to clear text from input using the clear() method in Playwright
const { test, expect } = require('@playwright/test');
test('Example: Clear input text using clear() method in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2015/03/chart.html');
//Fill the text in the text input field.
await page.locator('#tooltip-1').fill('Hello');
//Clear the text input field value using the clear() method.
await page.locator('#tooltip-1').clear();
});
Code Breakdown
- Here, the first line will type the text “Hello” in the textbox(id tooltip-1) using the fill() method.
- The next line will remove text from the same textbox using the clear() method.
Remove Text From an Input Field Using the fill() Method in Playwright
Another effective way to clear unwanted text from an input field in Playwright is by using the fill() method with an empty string (”). When you pass a blank argument, Playwright replaces the existing value in the input field with nothing, effectively clearing the text.
Here is a practical example to clear text from a textbox using the fill() method.
Example to clear text using the fill() method
const { test, expect } = require('@playwright/test');
test('Example: clear input text using fill() method in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2015/03/chart.html');
//Fill the text in the text input field.
await page.locator('#tooltip-1').fill('Hello World');
//Clear the text input field value using the fill('') method.
await page.locator('#tooltip-1').fill('');
});
Code Breakdown
- The first syntax will fill the text ‘Hello World’ in the textbox element located by id tooltip-1.
- The second sentence will clear the text from the textbox and make it blank.
Remove Text From Text Input By Simulating Keyboard Key Press
You can also clear text from an input field in Playwright by simulating key press actions like Ctrl+A (to select all text) followed by Backspace (to delete it). This method mimics how a real user would remove text from a textbox. To perform this in Playwright, use the press() method with key combinations like ‘Control+A’ and ‘Backspace’ to simulate the sequence of actions.
Let’s see how to delete text from the input text field using the press() method.
Example to Remove Text by Simulating Key Press Actions
const { test, expect } = require('@playwright/test');
test('Example: clear input text by simulating key press actions in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2015/03/chart.html');
const txtInput = page.locator('#tooltip-1');
//Fill the text in the text input field.
await txtInput.fill('How Are You?');
//Select all text from textbox by simulating CTRL+A key press.
await txtInput.press('Control+A');
//Clear value from textbox by simulating backspace key press.
await txtInput.press('Backspace');
});
Code Breakdown
- txtInput.press(‘Control+A’): Simulates pressing the Control and A keys together, which selects all the text within the located input element.
- txtInput.press(‘Backspace’): Simulates pressing the backspace button to delete selected text.
Remove Text From Input By Evaluating JavaScript In Playwright Test
Another alternative to clear text from an input field in Playwright is by evaluating JavaScript directly in the browser context. This approach allows you to programmatically set the input field’s value to an empty string, effectively removing any unwanted or garbage text before typing new content.
In the example below, we use JavaScript evaluation in Playwright to clear the text field by directly setting its value to an empty string.
Example to remove text by evaluating JavaScript in Playwright
const { test, expect } = require('@playwright/test');
test('Example: clear input text by Evaluating JavaScript in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2015/03/chart.html');
const txtInput = page.locator('#tooltip-1');
//Fill the text in the text input field.
await txtInput.fill('I am fine. How are You');
//Clear text from text input by Evaluating JavaScript.
await txtInput.evaluate(node => node.value = '');
});
Code Breakdown
- txtInput.evaluate(node => node.value = ”) executes JavaScript in the browser context to set the input field’s value to an empty string, effectively clearing the text from the located element.
Final Thoughts
Clearing text from input fields—such as textboxes, search boxes, or searchable dropdowns—is a fundamental requirement in Playwright automation testing. Playwright offers multiple ways to achieve this, including the clear() and fill(”) methods for direct text removal. You can also simulate real user actions using key presses like Control+A and Backspace. Additionally, evaluating JavaScript directly is another powerful method to clear input fields efficiently. Use the approach that best fits your testing scenario to ensure clean and reliable input handling.
Related Articles
- How to Press Keys in Playwright: Quick Guide
- Focus on an Element Using Playwright
- How to Hover Over Element in Playwright With Example
Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.
