如何针对mat-checkbox的类属性进行断言验证？

页面元素代码 #

<mat-checkbox _ngcontent-qei-c197="" id="sacSignoffChkbox" class="mat-checkbox mat-accent mat-checkbox-disabled ng-untouched ng-pristine">

问题描述 #

页面上的mat-checkbox因带有mat-checkbox-disabled类显示为禁用状态，但测试中尝试断言该类不存在时，两种写法都能通过，甚至点击动作也能通过，但实际复选框并未被勾选。

已尝试的代码 #

1. 检查Enabled属性：

bool checkBoxEnabled = auditPage.SACReviewCheckbox.Enabled; 
Assert.IsTrue(checkBoxEnabled, "The SAC Review Checkbox is not enabled");

2. 获取mat-checkbox-disabled属性：

var checkBoxEnabled = auditPage.SACReviewCheckbox.GetProperty("mat-checkbox-disabled"); 
Assert.IsNull(checkBoxEnabled);

解决建议 #

原因分析

• Enabled属性对应原生HTML的disabled属性，但Angular Material的禁用状态是通过添加mat-checkbox-disabled类实现的，而非原生disabled属性，因此直接检查Enabled会失效。
• GetProperty("mat-checkbox-disabled")逻辑错误，mat-checkbox-disabled是CSS类而非元素属性，所以该方法永远返回null，导致断言错误通过。

正确的断言方法

1. 检查元素是否包含禁用类
   通过获取元素的class属性，判断是否包含目标禁用类：

string classAttr = auditPage.SACReviewCheckbox.GetAttribute("class");
Assert.IsFalse(classAttr.Contains("mat-checkbox-disabled"), "The SAC Review Checkbox is disabled");

2. 定位内部原生input元素检查状态
   Angular Material复选框会在内部的<input>标签上设置原生disabled属性，可以直接定位该元素验证：

IWebElement checkboxInput = auditPage.SACReviewCheckbox.FindElement(By.CssSelector("input[type='checkbox']"));
Assert.IsTrue(checkboxInput.Enabled, "The SAC Review Checkbox is disabled");

3. 添加等待确保状态稳定
   如果测试中状态判断不稳定，可添加等待机制，确保元素状态更新完成后再执行断言和点击：

WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until(d => !auditPage.SACReviewCheckbox.GetAttribute("class").Contains("mat-checkbox-disabled"));

// 断言通过后执行点击
auditPage.SACReviewCheckbox.Click();

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