I’m working on a project in Puppeteer. I needed to clear a text field. Turns out, it’s not straightforward, but it’s not hard either.

Backing up a minute, Puppeteer is a library that enables you to automate a Google Chrome browser using server-side JavaScript (Nodejs). It’s pretty cool.

Back to the problem, you can get a reference to <input id='search-box'.../> on a webpage with Puppeteer:

let searchInput = await page.$('#search-box');

You can type text into that input field:

await searchInput.type('the definition of lit');

You CANNOT clear that typed text in a straightforward way, like:

await searchInput.clear();

However, you CAN clear it as you would if you were using Google Chrome, a triple click and a backspace.

await searchInput.click({clickCount: 3});
await searchInput.press('Backspace'); 

👀