[Question] Selector text-matches not working as expected

const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.setContent(`
        <div class="SpotlightEntry-title">
          <span class="SpotlightEntry-char is-highlighted">Vaste</span>
          <span class="SpotlightEntry-char"> </span>
          <span class="SpotlightEntry-char is-highlighted">activa</span>
        </div>
`);
  const locator = await page.locator(`div:text-matches("^Vaste activa$", "i")`);
  console.log(await locator.innerHTML());

  await browser.close();
})();

Why doesn’t this work? I’d expected it to match on the div. But it doesn’t. 😦 I want to match SpotlightEntry-title on the innertext with support for nbsp; exact text matching and case insensitive.

[jacobmesu]

@yury-s that works for me, thanks! There are no whitespaces in my vscode code, but it seems to treat an endline like a whitespace.

[ltsuda]

There might be a better way, but I can’t look at the moment.

Just using the same way you are doing, please see here the #nav-bar :text-matches("reg?ex", "i") example in the following link. I think in your case, you need to add a space between the div and :text-matches.. https://playwright.dev/docs/selectors#text-selector

const locator = await page.locator(`div: text-matches("^Vaste activa$", "i")`);