How to Press Keys in Playwright: Quick Guide

If you’re looking to press keys in Playwright for simulating real user interactions, the press() method is your go-to solution. Whether you want to press Enter, Spacebar, Tab, Arrow keys, or Escape, Playwright makes it easy to automate keyboard input and enhance your end-to-end testing scripts.

You can use the press() method to press keys in Playwright and simulate real user keyboard interactions during automation testing. In this guide, you’ll learn how to press various keyboard keys like Enter, Tab, Arrow keys, and more in your Playwright scripts.

Press Different Keys in Playwright

Let us see how to press different keys in Playwright automation testing.

Press the Enter Key on the Input Element In Playwright

To press the Enter key in Playwright, use the press() method with the “Enter” key as the argument.

Here is a complete example on how to press the Enter key in a playwright automation test.

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

test('Example: Press Enter key using press() method in playwright.', async ({ page }) => {
  await page.goto('http://only-testing-blog.blogspot.com/2015/03/chart.html');

  //Locate textbox and press Enter key.
  await page.locator('#tooltip-1').press('Enter');
  await page.waitForTimeout(5000);
});
Press Enter key using press() method in playwright

Code Breakdown

await page.locator('#tooltip-1').press('Enter');
  • It will locate the textbox web element with id tooltip-1.
  • The press() method with the “Enter” argument will simulate pressing the Enter key in Playwright.

Press the Alphabet Keys in Playwright

To press alphabet keys in Playwright, pass the desired letter as an argument to the press() method, as shown in the example below.

await page.locator('#tooltip-1').press('A');
await page.locator('#tooltip-1').press('B');
await page.locator('#tooltip-1').press('C');

Press the Number Keys in Playwright

You can pass numbers as an argument with the press() method to simulate the number key pressing action as given below.

await page.locator('#tooltip-1').press('1');
await page.locator('#tooltip-1').press('2');
await page.locator('#tooltip-1').press('3');

Press the Spacebar Key in Playwright

To press the spacebar key, you can pass the Space argument with the press() method. Here is an example to press the spacebar key in the Playwright automation framework.

await page.locator('#tooltip-1').press('H');
await page.locator('#tooltip-1').press('Space');
await page.locator('#tooltip-1').press('P');

Press the Left, Right, Down, and Up Arrow keys in Playwright

In Playwright automation, you can simulate arrow key presses using the press() method. Use ArrowDown for the down arrow, ArrowUp for the up arrow, ArrowLeft for the left arrow, and ArrowRight for the right arrow key actions.

Syntax to press the Left key

await page.locator('#elementid').press('ArrowLeft')

Syntax to press the Right key

await page.locator('#elementid').press('ArrowRight')

Syntax to press the Up key

await page.locator('#elementid').press('ArrowUp')

Syntax to press the Down key

await page.locator('#elementid').press('ArrowDown')

Press the Tab Key in Playwright

To navigate between input fields in Playwright, use the press() method with the Tab key to simulate tabbing through elements.

await page.locator('#elementid').press('Tab')

Press the Escape Key in Playwright

To simulate an Escape key press in Playwright, use the press() method with the Escape argument. This is useful for closing popups, modals, or canceling actions.

await page.locator('#elementid').press('Escape')

Press Other Keys in Playwright

To press function keys in Playwright, use the press() method with the function key name like F1, F2, etc. You can also use keys like Shift, Control, Alt, Home, End, PageDown, and PageUp to simulate their respective keyboard actions.

Use the following key names as arguments with the press() method in Playwright to simulate different keyboard key presses.

Key TypeKey Name (Argument)Description
Arrow KeysArrowUp, ArrowDown, ArrowLeft, ArrowRightSimulate arrow key navigation in forms or lists
Navigation & ControlTab, Escape, Enter, Backspace, DeleteSimulate tabbing, closing, submitting forms, or deleting
Function KeysF1, F2, F3, …, F12Simulate function key shortcuts
Modifier KeysShift, Control, Alt, MetaUsed alone or in combination with other keys (e.g. Ctrl+C)
Page NavigationHome, End, PageUp, PageDownMove the cursor or scroll through the page content
AlphabetsA to Z (e.g. ‘A’, ‘B’, ‘C’)Simulate typing alphabet letters
Numbers0 to 9 (e.g. ‘1’, ‘2’, ‘3’)Simulate numeric key presses
Symbols & Punctuation`, ~, !, @, #, $, %, ^, &, *, (, ), -, _, =, +, [, ], {, }, ;, :, ‘, “, \, |, ,, ., /, <, >, ?Simulate special character key presses
Space KeySpaceSimulate pressing the space bar

The table above lists all key arguments used with the press() method in Playwright to simulate various key press actions during automation testing.

Final Thoughts

Simulating key presses is an essential part of browser automation testing, especially for forms, navigation, and keyboard interactions. Playwright makes this easy with the press() method, allowing you to simulate everything from simple character inputs to complex combinations like function keys, modifiers, and navigation keys. Use the key arguments listed above to create robust and realistic test cases.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *