如何用Playwright判断并仅点击未选中的sp-checkbox组件

针对Spectrum Web Components的sp-checkbox自定义元素，Playwright内置的check()方法无法识别其非标准的选中状态标识，你可以通过以下两种方式实现仅点击未选中复选框的需求：

方法一：先判断状态再点击 #

先获取复选框元素，检查其是否存在checked属性，仅当未选中时执行点击：

const checkbox = this.page.getByTestId("test");
// 判断是否未选中：不存在checked属性即为未选中
const isUnchecked = await checkbox.evaluate(el => !el.hasAttribute("checked"));

if (isUnchecked) {
  await checkbox.click();
}

方法二：直接定位未选中的复选框 #

使用CSS选择器精准定位没有checked属性的sp-checkbox，仅当元素存在时执行点击：

const uncheckedCheckbox = this.page.locator('[data-test-id="test"]:not([checked])');
// 先确认元素存在再点击
if (await uncheckedCheckbox.count() > 0) {
  await uncheckedCheckbox.click();
}

为什么check()方法无效？ #

Playwright的check()方法是为标准HTML <input type="checkbox"> 设计的，它会识别原生复选框的checked属性状态。但Spectrum的sp-checkbox是自定义Web Component，其选中状态通过自定义的checked属性（而非原生input的状态）来标识，因此内置方法无法适配。

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