Blog # 14: Behind the Keys: Automating Keyboard Interactions with Playwright

When automating web applications, it's not just about testing buttons, links, or page loads. Keyboard interactions are an integral part of user behavior, and automating these tests ensures that your app is as functional and accessible as it should be. Whether you’re testing form fields, text editing, or shortcut commands, Playwright provides robust support for simulating keyboard operations.

In this blog, we'll dive into the essential keyboard commands available in Playwright and explain why testing keyboard interactions is crucial.

Why Keyboard Testing is Crucial for Web Automation

Keyboard interactions are foundational to many web applications. Here’s why testing them is so important:

User Experience: Users expect applications to behave consistently when interacting via keyboard. Ensuring that operations like copying, pasting, typing, or deleting text are functional is critical for a smooth experience.

Accessibility: A significant number of users rely on keyboard-only navigation, especially those with physical disabilities. Keyboard shortcuts and proper input handling ensure accessibility in line with WCAG (Web Content Accessibility Guidelines).

Cross-Browser Consistency: Different browsers might handle keyboard events slightly differently. Automated testing helps ensure that your app's behavior is consistent across platforms.

Efficient Workflow: Keyboard shortcuts, such as Ctrl + C, Ctrl + V, and Tab, are designed to speed up tasks. Automating these shortcuts ensures that your application performs them correctly, improving productivity.

Core Keyboard Commands in Playwright

1. page.keyboard.press()

Purpose: Simulate single key presses or combinations

Best For: Shortcut testing (Ctrl+C, Enter, Esc)

// Single key
await page.keyboard.press('Backspace');

// Key combination
await page.keyboard.press('Control+Shift+A');

2. page.keyboard.down() & page.keyboard.up()

Purpose: Manage sustained key states

Best For: Modifier keys in complex interactions

// Capital letter input
await page.keyboard.down('Shift');
await page.keyboard.press('a');
await page.keyboard.up('Shift');

3. page.keyboard.type()

Purpose: Simulate realistic typing

Best For: Form fields with validation/auto-complete

// Type with 100ms delay between keystrokes
await page.keyboard.type('Hello World', { delay: 100 });

Common Keyboard Shortcuts to Test in Playwright These keyboard shortcuts are crucial for user productivity in web applications. Here’s how you can automate them in Playwright:

Text Manipulation Shortcuts

Select All: Use await page.keyboard.press('Control+A') to highlight all text in editors/forms

Copy: Execute await page.keyboard.press('Control+C') to copy selected content

Paste: Run await page.keyboard.press('Control+V') to paste copied text between fields

Undo: Trigger await page.keyboard.press('Control+Z') to reverse last action

Redo: Use await page.keyboard.press('Control+Y') to reapply undone changes

Navigation Shortcuts

Tab Navigation: Press Tab key with await page.keyboard.press('Tab') to move focus forward

Reverse Tab: Use await page.keyboard.press('Shift+Tab') to navigate backwards

Down Arrow: await page.keyboard.press('ArrowDown') moves cursor/list selection down

Right Arrow: await page.keyboard.press('ArrowRight') shifts cursor right in text/forms

Form & UI Interactions

Submit Form: Use await page.keyboard.press('Enter') to submit forms without clicking buttons.

Toggle Checkbox: Execute await page.keyboard.press('Space') to select/deselect checkboxes.

Close Modal/Dropdown: Run await page.keyboard.press('Escape') to exit popups/menus.

Editing Basics

Delete Text (Forward): Trigger await page.keyboard.press('Delete') to remove characters after the cursor.

Backspace: Use await page.keyboard.press('Backspace') to delete characters before the cursor.

Real-World Test Scenarios

1. Text Editor Workflow Test

const { test, expect } = require('@playwright/test');

test('Keyboard Operations', async ({ page }) => {
  await page.goto('https://gotranscript.com/text-compare');
  
  // Use more reliable selectors and clear field first
  const sourceField = page.locator('[name="text1"]');
  const targetField = page.locator('[name="text2"]');
  
  await sourceField.clear();
  await sourceField.fill('Welcome to Automation');
  
  // Use keyboard shortcuts for copy/paste
  await page.keyboard.press('Control+A');
  await page.keyboard.press('Control+C');
  await page.keyboard.press('Tab'); // Simpler than keyboard.down()
  await page.keyboard.press('Control+V');
  
  // Better than fixed timeout: verify actual content
  await expect(targetField).toHaveValue('Welcome to Automation');
});

2. Simulate Deleting Text Using the Backspace Key

const { test, expect } = require('@playwright/test');

test.only('Keyboard operations', async ({ page }) => {
  await page.goto('https://www.google.co.uk/');
  
  // Accept the cookie consent banner
  await page.locator('#L2AGLb div').click();
  
  // Find the search input field and fill it with text
  const inputField = page.locator('#APjFqb');
  await inputField.fill('Clear this text');
  
  // Press the Backspace key to delete text
  for (let i = 0; i < 15; i++) {
    await page.keyboard.press('Backspace');
  }

  // Verify the input field is now empty
  const value = await inputField.inputValue();
  expect(value).toBe('');
});

Keyboard operations are more than convenience—they're core to usability, accessibility, and performance. By automating these interactions, you're not just writing tests—you're building better, more inclusive web applications.

Happy testing! 🚀