Playwright Input Methods: Teaching Your Robot to Type, Click & Choose

The Magical Typewriter Story

Imagine you have a magical robot assistant who can fill out any form on the internet for you. But here’s the thing — this robot needs to learn exactly how to interact with each type of input, just like you learned to use a keyboard and mouse!

This is what Playwright Input Methods are all about. Let’s teach our robot friend how to:

• Type in text boxes
• Check checkboxes
• Select radio buttons
• Pick from dropdowns
• Press keyboard keys

🎹 Text Input: Two Ways to Type

The fill() Method — The Fast Way

Think of fill() like copying and pasting text. You select a text box, and BAM — all the text appears instantly!

// Fill a username field instantly
await page.fill('#username', 'john_doe');

// Fill an email field
await page.fill('input[type="email"]', 'hi@example.com');

When to use fill():

• When you want text to appear immediately
• For most form filling tasks
• It’s faster and more reliable

The type() Method — The Human Way

Think of type() like a person typing with their fingers — one letter at a time. You can even control how fast!

// Type slowly, like a human
await page.type('#search', 'Hello World', {
  delay: 100  // 100ms between each key
});

When to use type():

• When the website watches for each keystroke
• For autocomplete search boxes
• When you need to simulate real human typing

fill() vs type() — Quick Comparison

☑️ Checkbox Operations

Checkboxes are like light switches — they’re either ON or OFF.

Checking a Checkbox

// Turn the checkbox ON
await page.check('#agree-terms');

Unchecking a Checkbox

// Turn the checkbox OFF
await page.uncheck('#newsletter');

Smart Checking with setChecked()

Sometimes you want to set it to a specific state, no matter what it was before:

// Force it ON (true) or OFF (false)
await page.setChecked('#remember-me', true);
await page.setChecked('#remember-me', false);

Real Example:

// Accept terms (check it)
await page.check('input[name="terms"]');

// Opt out of newsletter (uncheck it)
await page.uncheck('input[name="newsletter"]');

🔘 Radio Button Selection

Radio buttons are like a multiple choice test — you can only pick ONE answer from a group!

// Select a payment method
await page.check('#credit-card');

// Select a size
await page.check('input[value="medium"]');

// Select by label text
await page.getByLabel('Express Shipping').check();

Important: When you select a new radio button, the old one automatically unselects. Just like real radio buttons!

📋 Dropdown Selection

Dropdowns are like a menu at a restaurant — you open it, see all the options, and pick one.

Select by Value

// Select option with value="usa"
await page.selectOption('#country', 'usa');

Select by Label (What You See)

// Select by the text shown to users
await page.selectOption('#country', {
  label: 'United States'
});

Select by Index

// Select the 3rd option (index starts at 0)
await page.selectOption('#country', { index: 2 });

Select Multiple Options

Some dropdowns let you pick more than one:

// Pick multiple colors
await page.selectOption('#colors', ['red', 'blue']);

⌨️ Pressing Keyboard Keys

Sometimes you need to press special keys — like Enter, Tab, or Escape.

The press() Method

// Press Enter to submit
await page.press('#search', 'Enter');

// Press Tab to move to next field
await page.press('#username', 'Tab');

// Press Escape to close a popup
await page.press('body', 'Escape');

Common Keys You’ll Use

🎹 Key Combinations

Sometimes you need to press two keys at once — like Ctrl+C to copy!

The Magic of Modifier Keys

// Select all text (Ctrl+A)
await page.press('#textbox', 'Control+a');

// Copy (Ctrl+C)
await page.press('#textbox', 'Control+c');

// Paste (Ctrl+V)
await page.press('#textbox', 'Control+v');

// Undo (Ctrl+Z)
await page.press('#textbox', 'Control+z');

Shift Combinations

// Select text while moving (Shift+Arrow)
await page.press('#textbox', 'Shift+ArrowRight');

// Type uppercase A
await page.press('#textbox', 'Shift+a');

Mac-Friendly Commands

// On Mac, use Meta instead of Control
await page.press('#textbox', 'Meta+a');  // Cmd+A
await page.press('#textbox', 'Meta+c');  // Cmd+C

🎹 The Keyboard Class

For complex keyboard sequences, Playwright gives you the keyboard class — like having a remote control for the keyboard!

keyboard.press() — Single Key

// Press Enter anywhere on the page
await page.keyboard.press('Enter');

keyboard.type() — Type Text

// Type text with the keyboard
await page.keyboard.type('Hello World!');

keyboard.down() & keyboard.up() — Hold Keys

For holding keys down (like when gaming):

// Hold Shift, type "abc", release Shift
await page.keyboard.down('Shift');
await page.keyboard.type('abc');  // Types "ABC"
await page.keyboard.up('Shift');

keyboard.insertText() — Insert Without Events

// Insert text directly (no key events)
await page.keyboard.insertText('Quick text!');

🌟 Complete Example: Filling a Registration Form

Let’s put everything together!

// Fill the form
await page.fill('#name', 'Alex Smith');
await page.fill('#email', 'alex@example.com');

// Type password (triggers validation)
await page.type('#password', 'Secret123!');

// Check the terms checkbox
await page.check('#agree-terms');

// Select country from dropdown
await page.selectOption('#country', 'usa');

// Choose payment method (radio)
await page.check('#payment-card');

// Press Tab to move, then Enter to submit
await page.press('#submit', 'Enter');

🎯 Quick Reference

graph LR
    A[Input Methods] --> B[Text Input]
    A --> C[Checkboxes]
    A --> D[Radio Buttons]
    A --> E[Dropdowns]
    A --> F[Keyboard]

    B --> B1[fill - Instant]
    B --> B2[type - Character by character]

    C --> C1[check]
    C --> C2[uncheck]
    C --> C3[setChecked]

    D --> D1[check - Select one]

    E --> E1[selectOption]

    F --> F1[press - Single key]
    F --> F2[Key combinations]
    F --> F3[Keyboard class]

🚀 You’re Ready!

Now you know how to make your Playwright robot:

• Type text — fast with fill() or human-like with type()
• Check boxes — turn them on/off with check() and uncheck()
• Select radio buttons — pick one from many
• Choose from dropdowns — by value, label, or index
• Press keys — Enter, Tab, Escape, and more
• Combine keys — Ctrl+C, Ctrl+V, and other shortcuts
• Use the Keyboard class — for advanced control

Your robot is now ready to fill out any form on the internet! 🤖✨