How do you match against an OR case in Playwright?

The Playwright documentation says “Comma-separated list of CSS selectors will match all elements that can be selected by one of the selectors in that list.” but it doesn’t work.

If I do this:

await expect(page.locator('text="Banana"')).toBeVisible();

it matches, but if I do this:

await expect(page.locator('text="Banana", text="foo"')).toBeVisible();

it hangs

Is this not a “CSS selector”? how do I do the equivalent properly?

Answer

Yes, this is not a CSS selector. However, you can do it this way:

await expect(page.locator('span:has-text("Banana"), span:has-text("foo")')).toBeVisible();