How to delete existing text from input using Puppeteer?

Question

I'm trying to test amending text in an editable input which contains the title of the current record - and I want to able to test editing such text, replacing it with something else.

I know I can use await page.type('#inputID', 'blah'); to insert "blah" into the textbox (which in my case, having existing text, only appends "blah"), however, I cannot find any page methods1 that allow deleting or replacing existing text.

Solution 1

You can use page.evaluate to manipulate DOM as you see fit:

await page.evaluate( () => document.getElementById("inputID").value = "")

However sometimes just manipulating a given field might not be enough (a target page could be an SPA with event listeners), so emulating real keypresses is preferable. The examples below are from the informative issue in puppeteer's Github concerning this task.

Here we press Backspace as many times as there are characters in that field:

const inputValue = await page.$eval('#inputID', el => el.value);
for (let i = 0; i < inputValue.length; i++) {
  await page.keyboard.press('Backspace');
}

Another interesting solution is to click the target field 3 times so that the browser would select all the text in it and then you could just type what you want:

const input = await page.$('#inputID');
await input.click({ clickCount: 3 })
await input.type("Blah");

Solution 2

You can use the page.keyboard methods to change input values, or you can use page.evaluate().

Replace All Text:

// Using page.keyboard:

await page.focus('#example');
await page.keyboard.down('Control');
await page.keyboard.press('A');
await page.keyboard.up('Control');
await page.keyboard.press('Backspace');
await page.keyboard.type('foo');

// Using page.evaluate:

await page.evaluate(() => {
  const example = document.getElementById('example');
  example.value = 'foo';
});

Append Text:

// Using page.keyboard:

await page.focus('#example');
await page.keyboard.press('End');
await page.keyboard.type(' bar qux');

// Using page.evaluate:

await page.evaluate(() => {
  const example = document.getElementById('example');
  example.value += ' bar qux';
});

Backspace Last Character:

// Using page.keyboard:

await page.focus('#example');
await page.keyboard.press('End');
await page.keyboard.press('Backspace');

// Using page.evaluate:

await page.evaluate(() => {
  const example = document.getElementById('example');
  example.value = example.value.slice(0, -1);
});

Delete First Character:

// Using page.keyboard:

await page.focus('#example');
await page.keyboard.press('Home');
await page.keyboard.press('Delete');

// Using page.evaluate:

await page.evaluate(() => {
  const example = document.getElementById('example');
  example.value = example.value.slice(1);
});

Solution 3

If you are not interested in simulating any key events, you could also use puppeteer's page.$eval method as a concise means to remove the textarea's value...

await page.$eval('#inputID', el => el.value = '');
await page.type('#inputID', 'blah');

...or even completely replace the value in one step, without simulating the subsequent typing:

await page.$eval('#inputID', el => el.value = 'blah');

Solution 4

This works perfect for "clear only" method:

const input = await page.$('#inputID');
await input.click({ clickCount: 3 })
await page.keyboard.press('Backspace')

Solution 5

above answers has an ESLint issues. the following solution passing ESLint varification:

await page.evaluate(
  (selector) => { (document.querySelector(selector).value = ''); },
  inputBoxSelector,
);

View more solutions

Comments

[Felix K.]

Possible duplicate of How to clear an item value in puppeteer

[tuxuday]

await input.click({ clickCount: 3 }) , that is interesting! Just like we use browser!

[cburgmer]

Be aware that the triple click solution this will not work with textareas containing multiple lines, as that will only highlight one.

[Vaviloff]

@vsync 2 clicks select just one word and 3 clicks select all the text in an input, which is what the question is about :)

[mckenna]

The Mac equivalent for the Windows Control + A is Command + A.

[Michael]

The Backspace idea is nice, but now (Puppeteer 2) it must be await page.keyboard.press('Backspace'); instead of await page.press('Backspace');

[Coding Edgar]

the * page.keyboard.press('Backspace')* is the only method that works for me (using react), maybe because it is more "Blackbox" / reliable than just changing the value, meaning, some updates won't happen if you just change the value of an element.

[Sailesh Kotha]

await input.click({ clickCount: 4 }) for multiline select

[Developer Dave]

For cross-platform keyboard solutions, you could instead use page.keyboard.down('Shift'), page.keyboard.press('End'), followed by page.keyboard.press('Backspace')

[neonidian]

Replace all text doesn't work with Mac because ctrl + A keystroke in Mac would not select the entire text but instead place the cursor at the start of the field