How can I wait until elements matching multiple selectors appear?

Question

For example, I'm testing a search page, which will show the result numbers in .text > span:nth-child(1).

However, if not any result, it will only show text="nothing" or .text > span:nth-child(1) does not exist.

How can I wait for both conditions?

Answer 1

You need to use a comma-separated list of CSS selectors which will match all elements that can be selected by one of the selectors in that list:

//                                           ↓ comma
await page.locator('.text > span:nth-child(1), span:has-text("nothing")').innerText();

It will wait for either .text > span:nth-child(1) or span:has-text("nothing").