Playwright：如何与 Angular Material 复选框交互

Question

我有一个 Angular 组件，其中包含 Angular Material 复选框：

<mat-checkbox id="my-checkbox">My Checkbox</mat-checkbox> 

我的目标是使用 Playwright 测试包含的应用程序。

通过剧作家定位器，我能够成功引用

mat-checkbox

。我尝试使用定位器的

check

和

uncheck

函数显式设置复选框状态，但这失败了，因为

mat-checkbox

不是 HTML 输入元素。

const checkbox = page.locator('id=my-checkbox');    // OK
await checkbox.check();                             // throws
await checkbox.uncheck();                           // throws

我还尝试引用

mat-checkbox

包含的

<input>

元素，但这也失败了，显然是因为输入元素不可见（它仅由 Angular Material 在内部使用来实现复选框功能）。

使用定位器的

click

功能，我可以切换复选框的状态：

const checkbox = page.locator('id=my-checkbox');    // OK
await checkbox.click();                             // toggles checkbox state

但是，我不确定如何检索复选框的当前状态。对于

isChecked

及其包含的输入元素，定位器的

mat-checkbox

函数以相同的方式失败。

这是我第一次使用 Playwright 与 Angular Material 的体验，我想可能还有其他 Material 组件以类似的方式封装功能，从而妨碍了轻松测试。

是否有解决此问题的推荐最佳实践？

Answer 1

使用 locator.getAttribute 获取反映选中状态的特定属性：

await locator.getAttribute(attributeName);