Sunday, April 20, 2025

Keyboard Actions in playwright

 In this example, we will explore how to perform various keyboard actions using Playwright, illustrated by a practical example. In Playwright, keyboard actions are handled using the keyboard API. This allows you to simulate key presses, key downs, key ups, typing text, and shortcuts — useful for interacting with elements that need keyboard input (like input fields, forms, or web-based games).

Keyboard Actions in playwright


 Basic Keyboard Actions

In Playwright, keyboard actions can be performed using the keyboard API, which provides several methods for simulating key presses. The most commonly used methods include:

  1. press(key): Simulates pressing a single key.
  2. down(key): Holds down a key until it is released.
  3. up(key): Releases a previously held key.


 Type text into an input

This simulates typing each character one by one, including keyDown and keyUp events.

await page.keyboard.type('Hello, world!');


 Press a single key

Includes a full keydown → keypress → keyup cycle.

await page.keyboard.press('Enter');
await page.keyboard.press('ArrowDown');

await page.keyboard.press("Control+a"); // Select all text
await page.keyboard.press("Control+c"); // Copy selected text


 Hold down and release a key

await page.keyboard.down('Shift');
// Do something while Shift is held
await page.keyboard.up('Shift');

 Send a keyboard shortcut (e.g. Ctrl+C)

await page.keyboard.down('Control');
await page.keyboard.press('C');
await page.keyboard.up('Control');

 Fill an input using the keyboard

const input = await page.$('input[name="username"]');
await input.click();
await page.keyboard.type('myUser123');


Example -1

In this example we are performing keyboard action where copying the text from one text field and pasting it another text field.

// @ts-check
import { test, expect } from '@playwright/test';

test("Keyboard Actions", async ({ page }) => {
  await page.goto("https://www.saucedemo.com/v1/");
  await page.locator("#user-name").fill("Playwright");
  await page.keyboard.press("Control+a"); // Select all text
  await page.keyboard.press("Control+c"); // Copy selected text
  await page.keyboard.down("Tab");         // Move to the next field
  await page.keyboard.up("Tab");
  await page.keyboard.press("Control+v"); // Paste the copied text
  await page.waitForTimeout(3000);         // Wait for 3 seconds to observe the result
});


Example -2 

In this example we are performing Select All and Delete.

await page.keyboard.down('Control');
await page.keyboard.press('KeyA');
await page.keyboard.up('Control');
await page.keyboard.press('Backspace');

By using simple commands like press, down, and up, you can mimic common tasks such as filling out forms, copying and pasting text, and navigating between fields. As you explore Playwright further, you’ll find that its keyboard automation features can help you create more reliable tests and improve the overall quality of your software.


No comments:

Post a Comment