Test angular form control with Playwright

Question

I'm trying to test a form control, using the Playwright framework.

The DOM is something like this:

<div class="form-group">
<label for="usernameInput">User name</label>
<input type="text" id="usernameInput" formcontrolname="username" autocomplete="off" class="form-control text-uppercase ng-pristine ng-valid ng-touched" ng-reflect-name="username" ng-reflect-ng-class="">
</div>

As you can see, the content of the input is not visible here, so I'm not able to access it through Playwright with this:

await expect(page.locator('#usernameInput').textContent()).toEqual('NAME');

Do you know how to access the content of a form control in a playwright test? (the page element is correct)

Answer 1

You can get the input value with page.inputValue()

const value = await page.inputValue('#usernameInput')
expect(value).toEqual('NAME')

Answer 2

Instead of the text content, you have to assert the value. You can do this by using toHaveValue web-first assertion.

await expect(page.locator('#usernameInput')).toHaveValue('NAME')