What is the difference between page.fill() and page.type() in Playwright?

Answer

page.fill() vs page.type() in Playwright

page.fill() — Set Value Instantly

TypeScript

await page.fill('#email', 'user@example.com');
// OR
await page.getByLabel('Email').fill('user@example.com');

Behavior:

✓Clears any existing content first
✓Sets the value in one atomic operation
✓Does NOT fire individual keypress events
✓Very fast — doesn't simulate typing
✓Works with <input>, <textarea>, [contenteditable]

Best for: Login forms, data entry, any input where you just want to set a value quickly.

✦

page.type() / locator.pressSequentially() — Simulate Real Typing

TypeScript

// Older method
await page.type('#search', 'playwright automation');

// Modern equivalent (Playwright v1.29+)
await page.getByRole('searchbox').pressSequentially('playwright automation', { delay: 50 });

Behavior:

✓Types character by character
✓Fires keydown, keypress, keyup events for each character
✓Triggers auto-suggest/autocomplete widgets
✓Optional delay between keystrokes (in milliseconds)
✓Does NOT clear existing content first (appends to current value)

Best for: Autocomplete dropdowns, search-as-you-type, Google Suggest style inputs.

✦

Comparison Table

	`fill()`	`type()` / `pressSequentially()`
Clears field first	Yes	No
Speed	Instant	Character by character
Triggers key events	No	Yes (`keydown`, `keyup`, etc.)
Fires input events	Yes	Yes
Autocomplete support	No	Yes
Use case	Most inputs	Autocomplete, search boxes

Which to Use?

TypeScript

// Standard form field — use fill()
await page.getByLabel('Username').fill('john_doe');

// Search with autocomplete — use pressSequentially
await page.getByRole('searchbox').pressSequentially('New Y', { delay: 100 });
await page.getByText('New York').click(); // select from dropdown

// Clear and re-type
await page.locator('#field').clear();
await page.locator('#field').fill('new value');

Best Practice: Use fill() for almost all cases. Use pressSequentially() only when your app depends on key events (e.g., autocomplete, character counters, real-time validation).