playwright 支持直接在 css 选择器中使用 :disabled 和 :not(:disabled) 伪类，结合 locator() 与断言方法（如 tohavecount() 或 tohavetext()），可高效统计或操作启用/禁用状态的元素，无需手动遍历或调用 evaluate()。
playwright 支持直接在 css 选择器中使用 :disabled 和 :not(:disabled) 伪类，结合 locator() 与断言方法（如 tohavecount() 或 tohavetext()），可高效统计或操作启用/禁用状态的元素，无需手动遍历或调用 evaluate()。
在 Playwright 中，判断元素是否被禁用（disabled）无需像 Cypress 那样依赖 .filter(':disabled') 或 .not(':disabled') 的 jQuery 风格链式操作——Playwright 原生支持标准 CSS 伪类，且推荐通过声明式定位器（declarative locators） 实现更稳定、更可读的断言。
✅ 推荐方式：使用 CSS 伪类直接定位
1. 基于标签 + :disabled 筛选
await expect(page.locator('button:disabled')).toHaveCount(3); // 断言有 3 个禁用按钮
await expect(page.locator('button:not(:disabled)')).toHaveCount(2); // 断言有 2 个启用按钮
✅ 优势：简洁、语义清晰、完全运行在浏览器引擎层面（不触发 JS 求值），性能高且兼容性好。
2. 结合 data-test-id（或自定义测试属性）
若你已配置 selectors.setTestIdAttribute('data-test-id')（如你的 MyPage 类中所示），可优先使用 getByTestId() 组合 locator()：
// 假设页面中有多个 data-test-id="specific-element" 的元素
const baseLocator = this.page.getByTestId('specific-element');
// 获取所有禁用的匹配元素
const disabledLoc = baseLocator.locator(':scope:disabled');
// 获取所有启用的匹配元素
const enabledLoc = baseLocator.locator(':scope:not(:disabled)');
// 断言数量（推荐）
await expect(disabledLoc).toHaveCount(0); // 期望 0 个禁用
await expect(enabledLoc).toHaveCount(9); // 期望 9 个启用
// 或断言文本内容（用于调试/验证）
await expect(disabledLoc).toHaveText([]); // 空数组表示无禁用项
await expect(enabledLoc).toHaveText(['Save', 'Cancel', 'Submit']); // 示例
? :scope 是关键：它将后续伪类（如 :disabled）的作用域限定为当前 getByTestId() 匹配的元素集合，避免全局污染或误匹配。
⚠️ 注意事项与避坑指南
-
❌ 不要滥用 evaluate() 进行过滤：你原尝试的 this.element.evaluate(...elements.filter(...)) 存在两个问题：
- this.element 是单个 Locator，不是 DOM 元素数组，无法直接 .filter()；
- 即便获取到元素数组，evaluate() 会脱离 Playwright 的自动等待与重试机制，导致 flaky 测试。
✅ 正确做法始终是：用纯 CSS 定位 + Playwright 内置断言。
-
✅ :disabled 仅适用于原生表单控件（
page.locator('[aria-disabled="true"]'); // 而非 :disabled -
? 在测试中验证前，建议先用 await locator.count() 手动调试：
console.log(await disabledLoc.count()); // 输出实际数量，便于排查
? 总结
Playwright 的核心哲学是「定位即断言」——通过精准的 CSS 或角色选择器（如 getByRole()、getByTestId()）配合伪类，即可完成状态筛选。相比手动 evaluate 或模拟 Cypress 风格，这种方式更健壮、更易维护，也天然支持自动等待与重试。在你的 MyPage 类中，只需将 selectDisabledElements() 方法重构为返回 Locator 即可：
getDisabledElements() {
return this.element.locator(':scope:disabled');
}
getEnabledElements() {
return this.element.locator(':scope:not(:disabled)');
}
然后在测试中直接调用 await expect(...).toHaveCount(n) —— 简洁、可靠、地道。
