How to handle keyboard actions in Playwright?

Playwright provides comprehensive keyboard simulation capabilities for automating user interactions. This guide covers all essential keyboard methods with practical examples.

Core Keyboard Methods

page.type() - Typing Text

The page.type() method simulates typing text character by character, including natural typing delays.

Python Example:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto('https://example.com')

    # Type text into input field
    page.type('#search-input', 'Playwright automation')

    # Type with custom delay between keystrokes
    page.type('#email', 'user@example.com', delay=100)

    browser.close()

JavaScript Example:

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    // Type text into input field
    await page.type('#search-input', 'Playwright automation');

    // Type with custom delay between keystrokes
    await page.type('#email', 'user@example.com', { delay: 100 });

    await browser.close();
})();

page.press() - Single Key Presses

Use page.press() to simulate pressing individual keys, including special keys and modifiers.

Python Example:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto('https://example.com')

    # Press Enter key
    page.press('#form-input', 'Enter')

    # Press Tab to navigate
    page.press('body', 'Tab')

    # Press Escape to close modal
    page.press('body', 'Escape')

    browser.close()

JavaScript Example:

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    // Press Enter key
    await page.press('#form-input', 'Enter');

    // Press Tab to navigate
    await page.press('body', 'Tab');

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

    await browser.close();
})();

Keyboard Shortcuts and Modifiers

Handle complex keyboard combinations with modifier keys:

Python Example:

# Keyboard shortcuts
page.press('body', 'Control+a')  # Select all
page.press('body', 'Control+c')  # Copy
page.press('body', 'Control+v')  # Paste
page.press('body', 'Control+z')  # Undo

# Multiple modifiers
page.press('body', 'Control+Shift+i')  # Open DevTools
page.press('body', 'Control+Shift+Delete')  # Clear browsing data

JavaScript Example:

// Keyboard shortcuts
await page.press('body', 'Control+a');  // Select all
await page.press('body', 'Control+c');  // Copy
await page.press('body', 'Control+v');  // Paste
await page.press('body', 'Control+z');  // Undo

// Multiple modifiers
await page.press('body', 'Control+Shift+i');  // Open DevTools
await page.press('body', 'Control+Shift+Delete');  // Clear browsing data

Common Key Names

Playwright supports these key identifiers:

• Special Keys: Enter, Tab, Escape, Backspace, Delete, Space
• Arrow Keys: ArrowUp, ArrowDown, ArrowLeft, ArrowRight
• Function Keys: F1, F2, F3, ... F12
• Modifiers: Control, Alt, Shift, Meta (Cmd on Mac)
• Letters/Numbers: a, b, c, 1, 2, 3, etc.

Advanced Keyboard Interactions

Form Navigation Example

Python:

# Complete form using keyboard navigation
page.goto('https://example.com/form')

# Fill first field
page.type('#firstName', 'John')
page.press('#firstName', 'Tab')

# Fill second field
page.type('#lastName', 'Doe')
page.press('#lastName', 'Tab')

# Fill email
page.type('#email', 'john@example.com')

# Submit form with Enter
page.press('#email', 'Enter')

Text Manipulation Example

JavaScript:

await page.goto('https://example.com/editor');

// Type initial text
await page.type('#textEditor', 'Hello World');

// Select all text and replace
await page.press('#textEditor', 'Control+a');
await page.type('#textEditor', 'New content');

// Navigate with arrow keys
await page.press('#textEditor', 'ArrowLeft ArrowLeft');
await page.type('#textEditor', 'inserted ');

Best Practices

1. Focus First: Ensure the target element has focus before keyboard actions
2. Use Delays: Add delays for realistic typing simulation when needed
3. Handle Modifiers: Use proper modifier key combinations for shortcuts
4. Test Cross-Platform: Consider platform differences (Ctrl vs Cmd)

Focus and Type Pattern:

# Ensure element is focused before typing
page.click('#input-field')
page.type('#input-field', 'Your text here')

Troubleshooting

• Element not found: Verify selectors are correct and elements are visible
• Keys not working: Check if the element can receive keyboard input
• Timing issues: Add waits or delays between keyboard actions
• Platform differences: Use Meta instead of Control on macOS for shortcuts

For complete keyboard API documentation, visit the official Playwright keyboard documentation.