How to fill & clear values in the input text field in Playwright?

The Answer

`fill()` clears the existing value and sets new text in one atomic operation. `clear()` removes all text. `pressSequentially()` types character-by-character (for autocomplete/keyboard-event-driven inputs).

Deep Dive Explanation

Use `fill()` for 99% of cases — it's atomic and reliable. Use `pressSequentially()` when the input has JavaScript that fires on individual keystrokes (autocomplete, phone number formatting, OTP fields). Never use the deprecated `.type()` method in new tests.

example.spec.ts

const emailInput = page.getByLabel('Email');

// fill() - fastest, triggers input + change events, clears first
await emailInput.fill('user@example.com');

// clear() - removes all text, leaves field focused
await emailInput.clear();

// pressSequentially() - simulates actual keystrokes (for autocomplete)
await emailInput.pressSequentially('user@example.com', { delay: 50 }); // 50ms per key

// Verify the value
await expect(emailInput).toHaveValue('user@example.com');

// Append to existing text (don't clear first)
await emailInput.fill(''); // Clear manually if needed
await emailInput.press('End'); // Move cursor to end
await emailInput.type(' extra'); // DEPRECATED - use pressSequentially