How to Clear Input Text Field Value in Playwright: 4 Ways

By AravindPlaywright Tutorial

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.

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();
});
Clear input text using clear() method in playwright

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('');  
});
clear input text using fill() method in playwright

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');  
});
clear input text by simulating key press actions in playwright

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 = '');   
});
clear input text by Evaluating JavaScript in playwright

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

Leave a Reply

Your email address will not be published. Required fields are marked *