playwright: [BUG] TestId Selector with regex does not find elements

Context:

  • Playwright Version: 1.18.1
  • Operating System: MacOS
  • Node.js version: 16.13.1
  • Browser: All

Code Snippet

test.only("should find testid with regex inside", async ({ page }) => {
  await page.setContent(`<section data-testid="foo-09:00" >43543</section>`);
  await page.setContent(`<section data-testid="foo-14:00" >43543</section>`);

  const regex = new RegExp(`foo-[0-9]+:[0-9]+$`);
  const locator = await page.locator(`data-testid=${regex}`).count();
  console.log("locator count", locator); // returns 0
});

Describe the bug

I have a case with calendar component which has hour elements where some are disabled and some are not and I am trying to find first one that is not disabled. This works fine in Cypress, yet for Playwright returns 0 for the counts. Am I perhaps missing something?

Kind regards, Damevi

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 6
  • Comments: 17 (4 by maintainers)

Most upvoted comments

Regular expressions currently don’t work for data-testid matcher, only text.

Try CSS Attribute Selector if your ids start/end/contain with a specified value.

locator(“[id^=starts]”).click() locator(“[id$=ends]”).click() locator(“[id*=contains]”).click()

https://www.w3schools.com/css/css_attribute_selectors.asp

This would be really useful. I’d like to select elements matching some id pattern before doing an operation and I can’t think of a way of doing it with the tools currently available

Can you try the following?

const locator = await page.locator(`data-testid=/${regex}/`).count();

Search for the regex example here, you need the forward-slashes to use regex /regex/. https://playwright.dev/docs/selectors#text-selector

Maybe you need to set the regex const to be a string, without the new RegExp