How do I focus, type, and blur an input field and verify its value using Playwright?

Answer

To focus on an input field in @playwright/test, use the page.focus() method with a locator as its argument. After focusing, type into the input field using the locator.type() method. To blur the input field, simulate pressing the Tab key with page.keyboard.press(). Finally, check the input field's value using a combination of locators and assertions.

Here's an example:

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

test('focus, type, blur, and verify input value', async ({ page }) => {
  // Navigate to your website
  await page.goto('https://ray.run');

  // Focus on the input field
  await page.focus('#my-input');

  // Type into the input field
  await page.locator('#my-input').type('Hello World!');

  // Blur out of the input field by simulating pressing Tab
  await page.keyboard.press('Tab');

  // Check if the input field has the expected value
  const myInputValue = await page.locator('#my-input').getAttribute('value');
  expect(myInputValue).toBe('Hello World!');
});

In this example, we first navigate to the website, focus on the input field with the #my-input selector, type 'Hello World!' into it, and then blur out of it by simulating a Tab key press. Finally, we check if the input field's value matches the expected value using Playwright's built-in assertion methods.

By following these steps, you can easily focus, type, blur, and verify an input field's value using @playwright/test.