How do I simulate typing text into an input field using Playwright?

Answer

Pasting Text in a Textbox with Playwright

To paste text in a textbox using @playwright/test, you can use the locator.type() method. This method simulates typing characters into a field, just like a real user would do. Here's an example of how to type "Hello World!" into an input field with the ID of "area":

import { test } from '@playwright/test';

test('Type text into a textbox', async ({ page }) => {
  await page.goto('https://ray.run/example');
  await page.locator('#area').type('Hello World!');
});

This method emits all necessary keyboard events, such as keydown, keyup, and keypress events.

However, most of the time, you can use the page.fill() method to fill out form fields. It focuses on the element and triggers an input event with the entered text. It works for <input>, <textarea>, and [contenteditable] elements.

If there's special keyboard handling on the page that prevents page.fill() from working correctly, you can use locator.type(). You can even specify an optional delay between each keystroke to simulate real user behavior.

In summary, Playwright provides multiple ways to interact with HTML input elements like text inputs and checkboxes (using methods like .fill(), .setChecked(), etc.). If there's special keyboard handling on a page that prevents these methods from working correctly, you should use .type() instead.