如何用Playwright操作Angular Material复选框并获取其状态？

针对Angular Material封装的mat-checkbox组件，Playwright原生的check/uncheck/isChecked方法无法直接使用的问题，以下是实用解决方案：

1. 判断复选框选中状态 #

Angular Material会为复选框组件维护标准的ARIA属性和样式类，可通过两种方式获取状态：

方式一：通过aria-checked属性 #

Material组件会自动更新aria-checked属性为"true"或"false"，直接读取即可：

const checkbox = page.locator('#my-checkbox');
const isChecked = await checkbox.getAttribute('aria-checked') === 'true';

方式二：通过样式类判断 #

选中状态下，mat-checkbox会添加mat-checkbox-checked类，可通过判断该类是否存在确认状态：

const checkbox = page.locator('#my-checkbox');
const isChecked = await checkbox.locator('.mat-checkbox-checked').isVisible();

2. 精准设置复选框状态 #

由于click方法只能切换状态，要设置到指定状态，可封装通用方法，先判断当前状态再决定是否点击：

async function setMatCheckbox(locator, shouldBeChecked) {
  const currentState = await locator.getAttribute('aria-checked') === 'true';
  if (currentState !== shouldBeChecked) {
    await locator.click();
  }
}

// 使用示例
const myCheckbox = page.locator('#my-checkbox');
await setMatCheckbox(myCheckbox, true); // 确保选中
await setMatCheckbox(myCheckbox, false); // 确保未选中

3. 推荐操作原则 #

• 直接操作mat-checkbox元素本身：点击外层组件更贴近用户真实操作路径，比定位内部隐藏的input元素更可靠。
• 优先依赖ARIA属性：aria-checked是Material组件遵循可访问性标准的产物，比样式类更稳定，样式类可能随组件版本变更。

进阶方案：直接访问Angular组件实例 #

如果测试环境允许（如开发环境），可通过evaluate方法直接获取组件的checked属性：

const isChecked = await page.locator('#my-checkbox').evaluate(el => {
  // 需确保页面加载了Angular调试工具
  const component = ng.getComponent(el);
  return component.checked;
});

内容的提问来源于stack exchange，提问作者Tim Coulter