Search code examples
playwright

How can I wait until elements matching multiple selectors appear?

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?

Solution

  • 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").