playwright 支持通过 css 伪类 :disabled 和 :not(:disabled) 直接在定位器中筛选启用或禁用的元素，并配合 tohavecount() 或链式定位高效完成断言与计数，无需手动遍历 dom。
playwright 支持通过 css 伪类 :disabled 和 :not(:disabled) 直接在定位器中筛选启用或禁用的元素，并配合 tohavecount() 或链式定位高效完成断言与计数，无需手动遍历 dom。
在 Playwright 中，无需像 Cypress 那样依赖 .filter() 或 .not() 方法，也不需要调用 evaluate() 手动遍历元素数组——因为 Playwright 的 Locator 原生支持标准 CSS 伪类（如 :disabled、:enabled）以及 :not() 函数，可直接在选择器层面完成精准过滤。
✅ 推荐做法：使用伪类选择器 + toHaveCount()
对于通用 HTML 元素（如 <button>），可直接在 CSS 选择器中添加 :disabled：
// 统计所有禁用的 button
await expect(page.locator('button:disabled')).toHaveCount(3);
// 统计所有启用的 button（即非禁用）
await expect(page.locator('button:not(:disabled)')).toHaveCount(2);⚠️ 注意：:enabled 在部分浏览器中行为不一致（例如对 <input type="hidden"> 的处理），官方推荐优先使用 :not(:disabled) 作为“启用”语义的可靠替代。
✅ 结合 data-test-id 的进阶写法
当页面使用自定义测试属性（如 data-test-id）时，有两种等效方式：
使用Playwright API直接进行浏览器自动化。导航网站、与元素交互、提取数据、截图、生成PDF、录制视频，自动化复杂工作流程。比MCP方法更可靠。
方式一：getByTestId().locator()（推荐，语义清晰）
// 设置测试 ID 属性（通常在 test setup 中执行一次）
selectors.setTestIdAttribute('data-test-id');
// 定位所有 data-test-id="specific-element" 的禁用元素
const disabledLoc = page
.getByTestId('specific-element')
.locator(':scope:disabled');
// 断言数量 & 文本内容
await expect(disabledLoc).toHaveCount(0); // 期望 0 个禁用
await expect(disabledLoc).toHaveText([]); // 可选：验证文本为空
// 启用元素同理
const enabledLoc = page
.getByTestId('specific-element')
.locator(':scope:not(:disabled)');
await expect(enabledLoc).toHaveCount(9);方式二：纯 CSS 选择器（简洁，兼容性强）
// 等价写法，无需 setTestIdAttribute
await expect(
page.locator('[data-test-id^="specific-element"]:disabled')
).toHaveCount(0);
await expect(
page.locator('[data-test-id^="specific-element"]:not(:disabled)')
).toHaveCount(9);❌ 不推荐的做法及原因
-
避免在 evaluate() 中手动 filter：
// ❌ 错误示例：this.element 是 Locator，不是 Element[]，不能直接 .filter this.element.evaluate((elements) => elements.filter(...)); // 报错！
Locator 对象本身不可迭代；若需获取真实 DOM 节点数组，应先调用 await locator.all()，但会失去自动重试、超时和抗竞态优势，违背 Playwright 最佳实践。
避免使用 page.$$() + Array.filter()：
虽然技术上可行（如 await page.$$('[data-test-id]')），但会绕过 Playwright 的智能等待机制，且无法链式调用 expect 断言，显著降低稳定性与可维护性。
? 小结
| 场景 | 推荐定位器写法 | 断言方式 |
|---|---|---|
| 禁用元素 | locator(':disabled') 或 getByTestId(...).locator(':scope:disabled') | toHaveCount(n) / toHaveText([...]) |
| 启用元素 | locator(':not(:disabled)') | 同上 |
| 动态校验（如配置驱动） | 将预期数量存为常量，与 toHaveCount() 结合实现数据驱动断言 | await expect(loc).toHaveCount(expectedCount) |
通过合理组合伪类选择器与 Playwright 的声明式断言，你可以写出更简洁、稳定、可读性更强的端到端测试逻辑——既贴近 Cypress 的表达力，又充分发挥 Playwright 的底层优化能力。
