[REGRESSION]: migrating from locator.type to locator.fill is a breaking change

[bel0v]

locator.type() is marked as deprecated, with the suggestion In most cases, you should use locator.fill(value[, options]) instead.

.type focuses the input and puts in the text right next to the previous value.
.fill on the other hand clears up the input and fills it with new text, behaving like

await locator.clear()
await locator.type()

We have been using .type in our tests and thanks to that, found a bug in our codebase related to unwanted input. We would not have found it with using .fill — and thus not sure we should migrate to a less informative method.

[dgozman]

Yegor (@bel0v) If you don't like the behavior of fill, feel free to not use it. There is a Locator.pressSequentially() method that should work for you. Let me know if that's not the case.

[dgozman]

Closing because there is not action item for Playwright here. If you still encounter problems, please file a new issue with a repro and link to this one.

[maksnester]

Just confirming that pressSequentially works for me the same way as type, while fill doesn't work.

In my case, the issue is that fill doesn't find the input within a wrapper that contains test-id which I use as a locator e.g.

div[data-my-test-id]
  input

For this markup fill throws:

locator.fill: Error: Element is not an , <textarea> or [contenteditable] element

Which I think is inconsistent with pressSequentially and the deprecated type method.

I know that a label or name-based selector would be kinda better way to do it, but I'm working with what I have here.

Closing because there is not action item for Playwright here

Dmitry Gozman (@dgozman) I think it would be nice to make fill work the same way as type and pressSequentially in terms of finding the input.

[akwasin]

Just confirming that pressSequentially works for me the same way as type, while fill doesn't work.

In my case, the issue is that fill doesn't find the input within a wrapper that contains test-id which I use as a locator e.g.

div[data-my-test-id]
  input

For this markup fill throws:

locator.fill: Error: Element is not an , <textarea> or [contenteditable] element

Which I think is inconsistent with pressSequentially and the deprecated type method.

I know that a label or name-based selector would be kinda better way to do it, but I'm working with what I have here.

Closing because there is not action item for Playwright here

@dgozman I think it would be nice to make fill work the same way as type and pressSequentially in terms of finding the input.

Not sure how accurate your description was but the correct way of input data would be
div[data-testid="my-test-id"] and therefore

await page.locator('div[data-testid="my-test-id"]).fill('text);
await page.locator('div[data-testid="my-test-id"]).pressSequentially('text', { delay: 100 });
const textArea = await page.locator('div[data-testid="my-test-id"]); // textArea.fill('text');