Getting value of input element in Playwright

Question

How do I return the value of elem so that I can verify that it is in fact 1?

const elem = await page.$('input#my-input')
await elem.fill('1')

Micronesia

See this - https://mcmap.net/q/370674/-getting-value-of-input-element-in-playwright – Woke

The below accepted answer was updated from above answer which is in this same post on the bottom. – Woke

Answer 1

Also, since v1.20 there's the toHaveValue matcher that can verify an element's value:

await expect(page.locator('input#my-input')).toHaveValue('1');

inputValue method has been added in Playwright v1.13.0

await page.inputValue('input#my-input');

Locator:

await page.locator('input#my-input').inputValue();

It returns input.value for the selected <input> or <textarea> element. Throws for non-input elements. Read more.

Meanwhile, if you want to assert the value you can use toHaveValue

const locator = page.locator('input#my-input');

await expect(locator).toHaveValue(/[0-9]/);

Stonybroke

Better than $eval(). Thanks! – Homologue

Answer 2

The easiest way is to use $eval. Here you see a small example:

const playwright = require("playwright");

(async () => {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.setContent(`<input id="foo"/>`);
  await page.type("#foo", "New value")
  console.log(await page.$eval("#foo", el => el.value))
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

Daryldaryle

Thanks Max. I'm looking for an easy way to check the value of an HTML element handle. Is this possible? – Micronesia

Note for others: The essential code you're looking for is await page.$eval("#foo", el => el.value). – Homologue

Note also that $eval() doesn't perform actionability checks (it doesn't autowait), so you might need to precede your $eval() with something like await page.waitForSelector("#foo") – Homologue

in case of having issues with type, you can set: el as HTMLInputElement; – Pricecutting

Answer 3

From version 1.19 (and probably lower versions) Element Handler is not recomended. Instead of it use Locator.

page.locator(selector).innerText()

in your case with assertion it will be

expect(page.locator("input#my-input").innerText().includes("1")).toBeTruthy()

Read more on: https://playwright.dev/docs/api/class-elementhandle#element-handle-fill

Christchurch

Answer 4

ASSERTING VALUE

Use toHaveValue to get and verify value at same time.

await expect(locator).toHaveValue('expectedText')

It ensures the Locator points to an element with the given input value. You can use regular expressions for the value as well.

ASSERTING TEXT

If you need to assert text on the page, prefer expect(locator).toHaveText() with useInnerText option to avoid flakiness.

await expect(page.getByTestId('status')).toHaveText('Submitted');

Reference: https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-value

https://mcmap.net/q/375230/-getting-input-value-and-matching-using-playwright-test-runner Getting value of input element in Playwright

Woke

Answer 5

There are multiple ways, some better for their contexts.

Methods for input elements only

1. Getting the input value within a dedicated toHaveValue assertion:

const locator = page.locator('input[type=number]');
await expect(locator).toHaveValue("Expected Value");

2. Using the inputValue method that returns the value for the matching input or textarea or select element:

const value = await page.getByRole('textbox').inputValue();

Methods for all elements

1. Ensures the Locator points to an element with the given text using toHaveText assertion:

await expect(locator).toHaveText("Expected Text");

2. Using the textContent method that returns the node.textContent:

const text = await page.locator('#element').textContent();

3. Using innerText method:

const text = await locator.innerText();

4. Using evaluate method:

// using value property of HTMLDataElement interface
await page.locator(inputSelector).evaluate((el) => el.value);

// using innerText property of HTMLElement interface
await page.locator("#element").evaluate(node => node.innerText)

Note: The locator methods has auto-waiting mechanism, so you don't need to be worried about waiting in most cases.

Baa

Answer 6

This is to get the value through chrome context ( like executing in chrome devtools console ) . . As per the latest document it can be achieved using page.evaluate . https://playwright.dev/docs/evaluating .

Example

.

const linkhrefFromBrowser = await page.evaluate(async () => {
    // The below instructions will run in the browser console ( context )
    let element = element.getElementById("pagelink");
    let linkhref = element.getAttribute("href");
    console.log(linkhref); // will be printed in browser tab
    return linkhref; // whatever you return will be available in linkhrefFromBrowser variable
  });

Septima