How to enter values in the input text field sequentially and validate it?

The Answer

Use `pressSequentially()` to simulate character-by-character typing (triggering keydown/keypress/keyup events). Then validate with `toHaveValue()` Web-First assertion.

Deep Dive Explanation

The `delay` option in `pressSequentially()` controls milliseconds between keystrokes. Setting a realistic delay (50-150ms) makes the typing feel human to JavaScript event handlers that might throttle or debounce rapid input. For OTP or PIN inputs that listen for individual key events, this is essential.

example.spec.ts

const searchInput = page.getByRole('searchbox');

// Type sequentially with delay (simulates human typing)
await searchInput.pressSequentially('playwright', { delay: 100 });

// Verify the value
await expect(searchInput).toHaveValue('playwright');

// Verify autocomplete suggestions appear
await expect(page.getByRole('listbox')).toBeVisible();
await expect(page.getByRole('option', { name: /playwright/i })).toBeVisible();

// Select the first suggestion
await page.getByRole('option').first().click();

// Verify final state
await expect(searchInput).toHaveValue('Playwright Testing');