click, fill and type

Playwright actions simulate real user input. Each waits for the target element to be visible, stable, enabled, and receiving events before executing.

Essential Actions

fill() clears and sets input values — preferred over type() for form fields. type() sends keystrokes one by one, useful for inputs with per-key handlers.

click() supports { button: 'right' }, { clickCount: 2 }, { modifiers: ['Shift'] }, and { force: true } (escape hatch — avoid unless necessary).

await page.getByLabel('Email').fill('user@example.com');
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByLabel('Search').press('Enter');
await page.getByRole('checkbox', { name: 'Subscribe' }).check();

Actions auto-wait; no sleep between fill and click.

Action API Overview

locator.click(options?)
locator.fill(value)
locator.press(key)
locator.check() / .uncheck()
locator.selectOption(value | label | index)
locator.hover()
locator.dragTo(target)

fill is faster and less flaky than type for standard inputs.
press sends keyboard shortcuts (Control+o, ArrowDown).
check/uncheck work on checkboxes and radios.
selectOption targets <select> elements.

User Action Reference

Common actions and when to use them.

Action	Use Case
`.fill()`	Set input value directly
`.type()`	Simulate keystroke-by-keystroke input
`.click()`	Primary pointer activation
`.press('Enter')`	Submit forms, keyboard nav
`.check()`	Toggle checkbox on
`.selectOption()`	Pick dropdown option
`.hover()`	Reveal menus/tooltips
`.setInputFiles()`	Upload files

File Uploads

await page.getByLabel('Upload resume').setInputFiles('fixtures/resume.pdf');
await page.getByLabel('Photos').setInputFiles([
  'photo1.png',
  'photo2.png',
]);

When Not to Use force: true

force: true skips actionability checks. It hides real UI problems (covered buttons, animations). Fix the UI or wait for conditions instead.

Common Mistakes

Using type() everywhere instead of fill().
Clicking before a spinner overlay disappears — fix with proper assertions first.
Abusing { force: true } to pass tests with broken UX.
Forgetting await on actions.

Key Takeaways

Actions wait for element actionability automatically.
Prefer fill over type for standard form fields.
Use keyboard press for shortcuts and form submit.
Avoid force unless you understand what check it bypasses.

Pro Tip

Use locator.pressSequentially('code') when testing OTP inputs that focus the next box on each digit.