How do I retrieve the current value of an input element using Playwright?

Answer

To retrieve the current value of an input element using @playwright/test, you can use the locator.inputValue() method. This method returns a Promise that resolves to a string representing the input element's value. If the input element is empty, the string will be empty as well.

Here's an example using TypeScript:

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

test('Get input value', async ({ page }) => {
  await page.goto('https://ray.run/');

  // Locate the input element
  const inputLocator = page.locator('input[type="text"]');

  // Get the input value
  const inputValue = await inputLocator.inputValue();

  // Perform assertions or further actions
  console.log(inputValue);
});

You can also pass an optional options object to locator.inputValue(). This object allows you to specify a timeout for how long Playwright should wait for the input element's value to change before returning it. By default, there is no timeout, and Playwright returns immediately with the current value.

const inputValue = await inputLocator.inputValue({ timeout: 1000 });

In addition to getting input values, Playwright provides methods for setting values and interacting with other types of elements. For example, use locator.setChecked() to check or uncheck checkboxes and radio buttons, or locator.selectOption() to select options from dropdown menus.