如何让Playwright点击函数支持字符串或RegExp类型定位器参数？

我编写了一个用于点击页面元素的函数，希望将定位器参数设置为string或RegExp类型，代码如下：

export async function clickRegexLocator(page: Page, locator:string|RegExp) {
    await page.locator(locator).click();
}

该定位器格式类似#react-select-4-option-0，其中数字4会动态变化，我想用正则表达式替代固定数字4，但当前函数报错：

Argument of type 'string | RegExp' is not assignable to parameter of type 'string'.
  Type 'RegExp' is not assignable to type 'string'

想要实现从传入字符串定位器clickRegexLocator(page, '#react-select-4-option-0');改为传入正则定位器clickRegexLocator(page, /#react-select-\d+-option-0/);。

修改方案 #

Playwright的page.locator()方法默认仅支持字符串类型选择器，无法直接传入RegExp，因此需要针对定位器类型做分支处理：

完整修改代码

import { Page } from '@playwright/test';

export async function clickRegexLocator(page: Page, locator: string | RegExp) {
  let targetLocator;
  if (typeof locator === 'string') {
    // 字符串类型定位器直接使用
    targetLocator = page.locator(locator);
  } else {
    // 正则表达式类型，通过自定义逻辑匹配元素（这里针对id选择器场景）
    targetLocator = page.locator(({ page }) => 
      page.evaluateHandle((regex) => {
        // 遍历所有带id属性的元素，找到匹配正则的第一个元素
        const elements = document.querySelectorAll('[id]');
        for (const el of elements) {
          if (regex.test(`#${el.id}`)) {
            return el;
          }
        }
        return null;
      }, locator)
    );
  }
  await targetLocator.click();
}

简化替代方案（针对固定前缀后缀场景）

如果你的正则仅用于匹配id的动态中间部分（比如例子中的数字4），也可以直接用CSS属性选择器实现，无需正则：

// 等价于正则/#react-select-\d+-option-0/的CSS选择器
targetLocator = page.locator('[id^="react-select-"][id$="-option-0"]');

这种方式更简洁，但灵活性不如正则，适合规则固定的场景。

注意事项

• 若你的定位器不是id选择器（比如匹配文本、class），需要修改evaluateHandle中的匹配逻辑，比如匹配文本可使用el.textContent替代#${el.id}。
• 确保正则表达式的匹配逻辑与目标元素的选择器格式一致，比如例子中我们拼接#${el.id}来匹配完整的id选择器格式。

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