如何遍历Playwright页面对象构造函数中声明的选择器

你遇到的核心问题是没法在遍历过程中正确关联过滤器的Locator和对应的值，这里提供两种可行的实现方式：

方案一：用元组数组存储过滤器与对应值 #

直接把每个过滤器的Locator和要选择的值绑定成元组存入数组，遍历的时候直接取出使用，这种方式类型安全且代码简洁：

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

export class MyPage {
   readonly page: Page;
   // 定义过滤器集合：每个元素是[定位器, 目标值]的元组
   readonly filters: [Locator, string][];

   constructor(page: Page) {
      this.page = page;
      // 初始化所有过滤器及对应值
      this.filters = [
         [page.getByTestId('filterA'), "1"],
         [page.getByTestId('filterB'), "2"],
         [page.getByTestId('filterC'), "3"]
         // 继续添加其他过滤器...
      ];
   }

   async applySingleFilter() {
      for (const [filterLocator, value] of this.filters) {
         // 应用过滤器值
         await filterLocator.selectOption(value);
         
         // 断言结果已更新（根据实际业务场景编写，示例如下）
         // 示例1：检查结果列表数量符合预期
         // await expect(this.page.getByTestId('result-list')).toHaveCount(3);
         // 示例2：检查结果包含过滤后的特定内容
         // await expect(this.page.getByTestId('result-item')).toHaveText('过滤结果');
         
         // 清除过滤器（根据页面实际清除逻辑调整）
         // 示例：下拉框选择空值/默认选项
         await filterLocator.selectOption('');
         // 若有独立清除按钮，可改为：
         // await filterLocator.locator('..').getByTestId('clear-btn').click();
      }
   }
}

方案二：保留单个过滤器属性，用类型断言动态访问 #

如果不想修改现有单个过滤器的属性定义，可以通过类型断言让TypeScript允许动态访问类属性，同时确保键的合法性：

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

export class MyPage {
   readonly page: Page;
   readonly filterA: Locator;
   readonly filterB: Locator;
   readonly filterC: Locator;
   // ...以此类推...

   constructor(page: Page) {
      this.page = page;
      this.filterA = page.getByTestId('filterA');
      this.filterB = page.getByTestId('filterB');
      this.filterC = page.getByTestId('filterC');
      // ...以此类推...
   }

   async applySingleFilter() {
      // 定义过滤器名称与对应值的映射，确保键与类属性名完全一致
      const filterWithValues: Record<keyof Omit<MyPage, 'page' | 'applySingleFilter'>, string> = {
           filterA: "1",
           filterB: "2",
           filterC: "3"
      }
    
      // 遍历每个过滤器名称，通过类型断言确保类型合法
      for (const filterName of Object.keys(filterWithValues) as Array<keyof typeof filterWithValues>) {
          const filterLocator = this[filterName] as Locator;
          // 应用过滤器值
          await filterLocator.selectOption(filterWithValues[filterName]);
          
          // 断言结果更新（自行替换为实际断言逻辑）
          // await expect(this.page.getByTestId('result-count')).toHaveText('2');
          
          // 清除过滤器
          await filterLocator.selectOption('');
      }
   }
}

两种方案都能实现遍历每个过滤器、应用值、断言结果、清除过滤器的完整流程，可根据现有代码结构选择合适的方式。

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