How to Read Textbox Values in Playwright Tests

Better Stack Team
Updated on February 27, 2024

Playwright encourages using locator methods to select elements on your web pages. To read textbox values, you can use the inputValue() method on a locator pointing to the textbox. Here's how:

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

test('Read textbox value', async ({ page }) => {
  await page.goto('https://yourwebsite.com');

  const textboxLocator = page.locator('#myTextbox');

const textboxValue = await textboxLocator.inputValue();
console.log(textboxValue); });

You can also combine getting and verifying the value of a textbox in a single step like this:

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

test('Read textbox value', async ({ page }) => {
  await page.goto('https://yourwebsite.com');

  const textboxLocator = page.locator('#myTextbox');

await expect(textboxLocator).toHaveValue('my_value');
});

Thanks for reading, and happy coding!

🔭 Want to automate and scale your Playwright end-to-end tests?

Head over to Better Stack and start monitoring in 5 minutes.

Make your mark

Join the writer's program

Are you a developer and love writing and sharing your knowledge with the world? Join our guest writing program and get paid for writing amazing technical guides. We'll get them to the right readers that will appreciate them.

Write for us
Writer of the month
Marin Bezhanov
Marin is a software engineer and architect with a broad range of experience working...
Build on top of Better Stack

Write a script, app or project on top of Better Stack and share it with the world. Make a public repository and share it with us at our email.

community@betterstack.com

or submit a pull request and help us build better products for everyone.

See the full list of amazing projects on github