[Feature] Option to not clear a textbox element before filling it

[julienmonnard]

Hello! I came across a case in my tests, where I want to fill a textbox element with some text, but without clearing the field before.

Currently, there is two ways to do this, as far as I could find.

Assuming:

<input type="text" value="original" />

and

const inputField = page.getByRole('textbox');

The first option is to type the whole content, including the original value:

await inputField.fill('original with change');

And the second option is this one:

await inputField.press('ArrowRight'); // Or "ArrowDown", to lose the "all selected" state
await inputField.pressSequentially(' with change');

I think it would be a good approach if we could simply pass an option to the fill() method, that could do the job for the user, something like:

await inputField.fill(' with change', { clear: false });

This approach has the advantage of being simpler to remember for people writing the test, to fall more in line with the rest of the API, but also, it would make it possible to stick to the fill() method, which is the one recommended in the docs. 🙂

[pavelfeldman]

Given that there are good workarounds (fill complete value and type additional characters), I don't think we'll be adding 'clean' option.

[julienmonnard]

I'm not sure I would call them "good" workarounds...

For the first option, it means that we need to know what the current value is, which might not always be possible in the context of the test, and can also be very tedious if the existing value is more than a couple of words. Imagine for example applying this on a contenteditable element, that could be a rich text editor containing a multi-paragraph value.

For the second option, it means trading fill with pressSequentially, which is slower. Potentially much slower in the case of a long value to add.