JavaScript多复选框状态校验与切换异常问题排查

问题场景 #

有4个mat-checkbox复选框，需求为校验每个复选框的选中状态，实现选中则取消选中、未选中则选中的切换功能，初始状态所有复选框均为选中。但循环处理时，第一个复选框可成功取消选中，处理第二个复选框时，却会选中第一个而非操作目标复选框。

用户代码片段 #

var checkboxElements = await $$(`(//astd-courses-approval-checks//mat-checkbox)`);
for(let i= 1 ; i < checkboxElements.length ; i++ ){
    var getcheckBoxElem = await $(`(//astd-courses-approval-checks//mat-checkbox)[${i}]`);
    var getclass = await Actionutility.getAttribute( getcheckBoxElem, 'class');
    if ( getclass.includes("mat-mdc-checkbox-checked") ){
        await Actionutility.click(getcheckBoxElem);
        console.log(await Actionutility.getText(getcheckBoxElem) , "Is unchecked")
    }else{
        await Actionutility.click(getcheckBoxElem);
        console.log(await Actionutility.getText(getcheckBoxElem) , "Is checked")
    }
}

元素状态标识 #

• 选中状态class：mat-mdc-checkbox mat-checkbox-multiline mat-accent ng-pristine ng-valid mat-mdc-checkbox-checked ng-touched
• 未选中状态class：mat-mdc-checkbox mat-checkbox-multiline mat-accent ng-valid ng-dirty ng-touched

问题原因 #

1. 重复查询DOM导致定位错误：循环中每次通过$(//astd-courses-approval-checks//mat-checkbox)[${i}]重新查询元素，点击第一个复选框后，Angular的变更检测会触发DOM更新，可能导致XPath索引对应的元素发生偏移，操作了错误的目标。
2. 索引不匹配：原代码中checkboxElements是数组（0-based索引），但循环从i=1开始，同时XPath是1-based索引，虽然第一个元素能操作，但会漏掉最后一个复选框，且后续索引逻辑易受DOM变化影响。

解决方案 #

直接使用初始获取的元素数组进行循环操作，避免重复查询DOM，同时修正索引为0-based：

const checkboxElements = await $$(`//astd-courses-approval-checks//mat-checkbox`);

// 遍历所有复选框（0-based索引）
for(let i = 0; i < checkboxElements.length; i++){
    const checkboxElem = checkboxElements[i];
    const classAttr = await Actionutility.getAttribute(checkboxElem, 'class');
    
    if (classAttr.includes("mat-mdc-checkbox-checked")){
        await Actionutility.click(checkboxElem);
        console.log(await Actionutility.getText(checkboxElem), "已取消选中");
    } else {
        await Actionutility.click(checkboxElem);
        console.log(await Actionutility.getText(checkboxElem), "已选中");
    }
}

说明 #

• 初始获取的checkboxElements数组保存了所有复选框的元素引用，循环操作数组元素可确保每次操作的是目标复选框，不受中间DOM更新的影响。
• 修正为0-based索引后，能覆盖所有4个复选框，避免遗漏。

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