how to clear input field value before typing/inserting?

[typekpb]

I'm in a situation, that on script re-run are previously inserted input fields prefilled with old values.
So calling:

.insert('input#foo', 'zzz')

or

.type('input#foo', 'zzz')

makes the value to be appended only.
Any chance to overwrite?
Currently I'm workarounding it with:

.evaluate(function() {
    document.querySelector('input#foo').value = 'zzz'
    })

[marcelfalliere]

I think this is the desired behaviour. Following the philosophy of that, maybe you should try to insert backspace characters.

[typekpb]

@marcelfalliere OK you're right, what works for me is to do:

.evaluate(function() {
    document.querySelector('input#foo').value = ''
})
.insert('input#foo', 'zzz')

however it could be handy to have some API way to do that, either some boolean flag for replace, or some clear method.

[rosshinkley]

In addition to sending backspace characters as @marcelfalliere said, you can send empty or falsey values to .type() and .insert() to clear the selector.

I do have a question:

...on script re-run are previously inserted input fields prefilled with old values.

Meaning that the values are there between runs to the same site?

[typekpb]

@rosshinkley

I do have a question:

...on script re-run are previously inserted input fields prefilled with old values.

Meaning that the values are there between runs to the same site?

correct

[leimonio]

@rosshinkley I'm passing either empty or falsy values for text and none of these seems to clear the input value?

[MichaelMartinez]

The method provided by @simov doesn't work for me... I have to resort to using

await page.keyboard.press('Backspace');

To clear a text box... seems like xxx.clear() would be super awesome and a pretty standard use case???

[rbairwell]

I did try using:

await page.click('.id');
await page.keyboard.down('Control');
await page.keyboard.press('KeyA');
await page.keyboard.up('Control');
await page.keyboard.press('Backspace');

to emulate Ctrl+A and backspace to empty the field, but this doesn't work on Macs (as Cmd+A is handled by the OS - see puppeteer/puppeteer#1313 ) - however,

const elementHandle=await page.$('.id');
await elementHandle.click();
await elementHandle.focus();
// click three times to select all
await elementHandle.click({clickCount: 3});
await elementHandle.press('Backspace');
await elementHandle.type('text');

does seem to work.

[mikrstic]

Why not simply:

await page.click("input[name=email]", {clickCount: 3})
await page.type("input[name=email]", "[email protected]")

Select everything by clicking 3 times and then just start typing, it will replace the selected text.

[tuancaraballo]

This is what I ended up doing: a combination of @mikrstic and @MichaelMartinez

    await page.click("input[name=email]", {clickCount: 3})
    await page.keyboard.press('Backspace')

Another approach that also worked for me is:

    await page.focus("input[name=email]")
    await page.$eval("input[name=email]", el => el.setSelectionRange(0, el.value.length))
    await page.keyboard.press('Backspace')

[lukewlms]

Triple-click seems to only select current para, so that solution fails with a multi-para text input.

@tuancaraballo Backspace solution works for me.

[Legends]

What's the difference when doing this:

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

[nkpz]

Keep in mind that el.setSelectionRange(0, el.value.length) will not work for certain types of inputs. In my case it was an email input. Went with a triple-click.

Setting the value directly by evaluating js seems to be a good solution too. In my case I'm just trying to be a purist about only simulating user behavior, so the triple click was an improvement in that sense.

Edit: I had some issues with the click method when there was an overlay on top of the input. This is working really well for me:

  await page.keyboard.press('Home');
  await page.keyboard.down('Shift');
  await page.keyboard.press('End');
  await page.keyboard.up('Shift');
  await page.keyboard.press('Backspace');

[maheshtekawade95]

how can i clear multiple values from input box using playwright?