如何在Playwright中选择/统计禁用/启用状态的元素？

针对你的需求，Playwright提供了几种简洁的方式来实现禁用/启用元素的统计与断言，以下是适配你现有页面类的具体方案：

方案一：直接通过Locator过滤（推荐） #

Playwright的Locator支持直接使用CSS伪类进行筛选，无需额外的evaluate操作，代码更简洁且符合Playwright的最佳实践：

1. 扩展你的页面类，添加统计方法 #

import { Locator, Page, selectors, expect } from '@playwright/test';

export class MyPage {
  readonly elements: Locator; // 变量名改为复数更贴合语义
  constructor(public readonly page: Page) {
    selectors.setTestIdAttribute('data-test-id');
    this.elements = this.page.locator(`[data-test-id^="specific-element"]`);
  }

  // 获取启用元素的数量
  async getEnabledElementsCount(): Promise<number> {
    return this.elements.locator(':not(:disabled)').count();
  }

  // 获取禁用元素的数量
  async getDisabledElementsCount(): Promise<number> {
    return this.elements.locator(':disabled').count();
  }
}

2. 在测试中进行断言 #

test('验证元素禁用/启用数量符合要求', async ({ page }) => {
  const myPage = new MyPage(page);
  await page.goto('你的目标页面URL');

  const expectedDisabledCount = 0;
  const expectedEnabledCount = 9;

  // 方式一：通过方法返回值断言
  await expect(myPage.getDisabledElementsCount()).resolves.toBe(expectedDisabledCount);
  await expect(myPage.getEnabledElementsCount()).resolves.toBe(expectedEnabledCount);

  // 方式二：更简洁的链式断言
  await expect(myPage.elements.locator(':disabled')).toHaveCount(expectedDisabledCount);
  await expect(myPage.elements.locator(':not(:disabled)')).toHaveCount(expectedEnabledCount);
});

方案二：使用evaluate手动过滤（适合复杂自定义场景） #

如果需要更灵活的过滤逻辑，可以使用evaluate，但要修正你之前代码的两处问题：

async selectDisabledElements(): Promise<Element[]> {
  return this.elements.evaluate((elements) => {
    // NodeList没有数组的filter方法，需先转为数组
    return Array.from(elements).filter((button) => button.disabled);
  });
}

// 对应统计方法
async getDisabledElementsCount(): Promise<number> {
  const disabledElements = await this.selectDisabledElements();
  return disabledElements.length;
}

原代码错误说明 #

• elements是NodeList对象，原生不支持数组的filter方法，必须用Array.from()转为数组后再操作
• 过滤回调中的变量名错误：element.disabled应该改为button.disabled（对应回调参数名）

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