[REGRESSION]: Can't find selector using regex

[mpaczula]

Context:

• GOOD Playwright Version: 1.27.1
• BAD Playwright Version: 1.28.1
• Operating System: Windows
• Node.js version: 19.0.0
• Browser: Chromium

Code Snippet

const item = this.listItems
      .filter({ hasText: itemName })
      .filter({ hasText: new RegExp(`^${getUiWeekdays(itemWeekdays)}$`) });

selector in Playwright 1.27.1: list >> .list-item >> internal:has="text=z-20221212-bsqg" >> internal:has="text=/^Mon$/"

selector in Playwright 1.28.1: list >> .list-item >> internal:has-text="z-20221212-bsqg"i >> internal:has-text=/^Mon$/

full X-Path: /html/body/app-root/div/app-view/app-side-menu-layout/dx-drawer/div/div[2]/div[2]/app-item-creation-view/div[2]/div/div[1]/dx-scroll-view/div[1]/div/div[1]/div[2]/div/app-item-list/div[92]/div[2]/div[1]/p[1]

Describe the bug

Selector was properly located using regex for v1.27.1, after updating to v1.28.1 it cannot be found (there is an i added after first text but not after the second one)

[yury-s]

Please attach the page where it fails with a complete test code which we could run to reproduce this locally.

[mpaczula]

I can't really do that, so here is an example that can be run on playwright.dev - it's rather dummy but will help you to reproduce the bug:

import { test } from '@playwright/test';
test('Should open Annotations', async ({ page }) => {
  await page.goto('https://playwright.dev/docs/intro');
  const listItems = page.locator('.menu__list-item');
  const item = listItems
    .filter({ hasText: new RegExp(`^Debugging Tests$`) })
    .nth(1);
  await item.click();
});

[yury-s]

This is good enough, thank you!

[dgozman]

@mpaczula This was a bug fix #18260. Now { hasText: new RegExp('^Debugging Tests$') } only matches those elements where full text content matches the regular expression.

So, in the example from playwright.dev, the list item "Debugging Tests" matches, but the parent list item does not, because it has text content of all list items combined. Therefore, nth(1) does not match anything. Changing to nth(0) or dropping it entirely matches the intended element:

const item = listItems
    .filter({ hasText: new RegExp(`^Debugging Tests$`) });

Let me know whether this helps.

[mpaczula]

@dgozman it does, thanks for the info