Playwright JavaScript中RegExp结合filter匹配按钮失败求助

原始问题 #

我希望使用getByRole和Filter方法点击特定按钮，但不清楚按钮的确切名称。按钮名称可能包含大写字母，且字符间可能有0个或1个空格（例如目标按钮名称为"MAtch ST r"），我只能依赖变量regExStr = "matchstr"。经regex101验证，以下代码中的正则表达式逻辑正确，但Playwright仍无法找到目标按钮，恳请帮助：

regExStr = "matchstr"
await page
  .getByRole("button")
  .filter({ hasText: `/${regExStr.split("").join("\\s?")}.../i` })
  .click();

问题根源 #

Playwright的filter({ hasText })参数不接受字符串形式的正则表达式（比如"/xxx/i"），必须直接传入RegExp对象实例，这是代码失效的核心原因。另外原代码中的...是字面量匹配三个点，若想匹配任意后续字符需要调整正则逻辑。

修复代码 #

将字符串正则改为RegExp实例，同时修正后续字符匹配逻辑：

const regExStr = "matchstr";
// 构建正则：每个字符间允许0或1个空格，忽略大小写，支持匹配任意后续字符
const targetRegex = new RegExp(regExStr.split("").join("\\s?") + ".*", "i");

await page
  .getByRole("button")
  .filter({ hasText: targetRegex })
  .click();

备选方案（针对文本嵌套子元素的情况） #

如果按钮文本嵌套在子元素中，hasText可能无法正确捕获，可改用has结合getByText：

const regExStr = "matchstr";
const targetRegex = new RegExp(regExStr.split("").join("\\s?") + ".*", "i");

await page
  .getByRole("button")
  .filter({ has: page.getByText(targetRegex) })
  .click();

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