Playwright TS无法校验网格单元格中伪复选框状态的问题

问题 #

需要断言Webix框架网格单元格中模拟复选框的选中/未选中状态，但该复选框由span元素实现，使用Playwright TS的isChecked()或toBeChecked()断言时，报错提示“Not a checkbox or radio button”，寻求校验状态的方法。

对应HTML代码 #

<div column="0" class="webix_column  webix_first webix_select_mark" style="" xpath="1">
   <div role="gridcell" aria-rowindex="1" aria-colindex="1" class="webix_cell" style="" tabindex="0">
       <span class="webix_table_checkbox webix_icon wxi-checkbox-marked">
       </span>
   </div>
</div>

断言代码 #

const mapBox = page.locator("//span[@class='webix_table_checkbox webix_icon wxi-checkbox-marked']").nth(0);
await mapBox.isChecked();
//OR 
// await expect(mapBox).toBeChecked();

报错信息 #

Error: locator.isChecked: Error: Not a checkbox or radio button
Call log:
  - waiting for locator('//span[@class=\'webix_table_checkbox webix_icon wxi-checkbox-marked\']').first()

解决方法 #

这是非原生复选框控件，无法使用isChecked()或toBeChecked()这类针对原生表单元素的方法，需通过Webix框架定义的类名来判断状态：

• 校验选中状态：选中时span会带有wxi-checkbox-marked类，直接断言元素包含该类即可：

  const mapBox = page.locator("span.webix_table_checkbox").nth(0);
  // 断言已选中
  await expect(mapBox).toHaveClass(/wxi-checkbox-marked/);
  

• 校验未选中状态：未选中时元素会使用wxi-checkbox-empty类（Webix默认未选中样式类），断言元素包含该类：

  // 断言未选中
  await expect(mapBox).toHaveClass(/wxi-checkbox-empty/);
  

• 也可通过直接检查类名存在性的方式判断：

  const isChecked = await mapBox.evaluate(el => el.classList.contains('wxi-checkbox-marked'));
  expect(isChecked).toBe(true); // 根据需求改为false即可校验未选中状态
  

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