Check form values and text in Playwright

Use toHaveValue(), toHaveValues(), and toHaveText() to distinguish a form control value from text and HTML attributes.

Guance Editorial Team 2026-10-27 3 min read Updated 2026-10-27

Illustration of software development and testing

Use await expect(locator).toHaveValue('expected') to check an input, textarea, or single-select value. The assertion has been available since Playwright 1.20 and retries automatically. For ordinary element text, use toHaveText(); for HTML attributes, use toHaveAttribute().

The examples below are fragments for a configured Playwright Test project. Import test and expect, navigate to your test page, and adapt the selectors and expected data to that page.

Check an input value

// Exact value.
await expect(page.locator('#name-input')).toHaveValue('Alex');

// At least one non-whitespace character, including non-Latin text.
await expect(page.locator('#name-input')).toHaveValue(/\S+/);

// Empty input.
await expect(page.locator('#name-input')).toHaveValue('');

The regular expression checks for a non-whitespace character anywhere in the value; it does not require every character to be non-whitespace.

Check a multiple select

await page.locator('#fruits').selectOption(['apple', 'banana']);
await expect(page.locator('#fruits')).toHaveValues(['apple', 'banana']);

Use toHaveValues() for a multiple-select element. To read its selected values into application code, evaluate its selectedOptions rather than expecting inputValue() to return an array.

Read a value without asserting it

const value = await page.locator('#name-input').inputValue();
const text = await page.locator('.title').textContent();

inputValue() reads the current value of a supported form control. textContent() reads raw node text, including hidden content. innerText() follows rendered-text semantics, but it is not a general visibility test: a hidden element can fall back to its text content.

The DOM value property and the value attribute can differ. User input normally changes the property; getAttribute('value') reads the current attribute, which need not change with it.

Match the method to the data

Target	Assertion	Read method
Form control value	`toHaveValue()`	`inputValue()`
Element text	`toHaveText()`; use `{ useInnerText: true }` for `innerText` semantics	`textContent()` or `innerText()`
HTML attribute such as `href` or `data-*`	`toHaveAttribute()`	`getAttribute()`

Frequently asked questions

Why does toHaveValue() fail on a div or span?

Those elements do not expose a form-control value. Check their text with toHaveText() instead.

Why did a test pass without checking what the user typed?

An input's displayed value is not its child text. toHaveText('') therefore cannot verify an empty input; use toHaveValue(''). String-based text assertions normalize whitespace, while regular expressions follow their own matching rules.

How should I check a rich-text editor?

A contenteditable element is not a form control for inputValue(). Check its content with toHaveText() or textContent(). For a richer editor library, inspect its DOM and documented interface; it may also maintain a hidden textarea.