Test angular form control with Playwright-CodePudding

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

The DOM is something like this:

<div >
<label for="usernameInput">User name</label>
<input type="text" id="usernameInput" formcontrolname="username" autocomplete="off"  ng-reflect-name="username" ng-reflect-ng->
</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)

CodePudding user response：

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')

CodePudding user response：

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

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