locator.fill and locator.pressSequentially in Playwright

In Playwright 1.38, a new locator.pressSequentially() method was introduced. On the other hand, it still has the locator.fill() method. Both methods serve one simple goal – to complete text input with text using a keyboard.

This article will briefly examine how all these methods work and when to use them.

For this tutorial, I will use a simple HTML user input.

First name:

You can generate it for test purposes using the Playwright Page.setContent() method:

TypeScript

await page.setContent('
<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="name"
</form>

</body>
</html>

');

locator.fill()

Let’s start with the page.fill() method. It waits for actionability checks, focuses on the element, fills it, and triggers an input event after filling. You can also pass an empty string to clear the input field.

Fills the input element with one action as if you pasted it from the clipboard.

TypeScript

await page.locator('//*[@id = "name"]').fill('Eugene Truuts');

I suggest this filling method as default when you just want to fill the forms without checking any user input events handling. To send fine-grained keyboard events, use a locator.pressSequentially() method

locator.pressSequentially()

This method focuses on the element and then sends a keydown, keypress/input, and keyup event for each character in the text to simulate the real-like user’s behavior.

TypeScript

await page.locator('//*[@id = "name"]').pressSequentially('Eugene Truuts');

I suggest using it to test specific user input interactions like search fields with user input events handling. I.e, then you want to check that search results refresh after each entered character just like on the Google search page.

locator.type

In earlier versions of Playwright (< 1.38) locator.type() method used to make the same things as the locator.pressSequentially() method.

TypeScript

await page.locator('//*[@id = "name"]').type('Eugene Truuts');

In Playwright 1.38 locator.type() method was deprecated. Use the locator.pressSequentially() method instead.

Check my Playwright keyboard guide here:

How To Control a Keyboard in Playwright

One thought on “locator.fill and locator.pressSequentially in Playwright”

locator.fill and locator.pressSequentially in Playwright

locator.fill()

locator.pressSequentially()

locator.type

One thought on “locator.fill and locator.pressSequentially in Playwright”