使用 Playwright 测试 angular 表单控件

Question

我正在尝试使用 Playwright 框架测试表单控件。

DOM是这样的：

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

如您所见，输入的内容在这里不可见，因此我无法通过 Playwright 访问它：

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

你知道在剧作家测试中如何访问表单控件的内容吗？（页面元素正确）

Answer 1

您必须声明值，而不是文本内容。您可以使用 toHaveValue web-first assertion.

来完成此操作

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

Answer 2

可以通过page.inputValue()

获取输入值

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

使用 Playwright 测试 angular 表单控件

Test angular form control with Playwright

angular

playwright