I am trying to await a div that has one of two possible ids, div#abc or div#efg.

I can await div#abc like this:

    await this.page.waitForSelector('div#abc');

But how can I tell Playwright that I also want the step to pass if div#efg is present?

I am trying to await a div that has one of two possible ids, div#abc or div#efg.

I can await div#abc like this:

    await this.page.waitForSelector('div#abc');

But how can I tell Playwright that I also want the step to pass if div#efg is present?

• javascript
• playwright

• See this - stackoverflow.com/a/77128725 – Vishal Aggarwal Commented Feb 29, 2024 at 12:27
• In the above linked post playwright Or operator is discussed in detail which is native playwright solution to this problem, – Vishal Aggarwal Commented Feb 29, 2024 at 12:37

3 Answers 3

Like with Puppeteer, Playwright selectors can be standard CSS, so just add a comma between the selectors:

await this.page.waitForSelector('div#abc, div#efg');

More general solution that works for any number of async operations:

const firstResolvedPromiseResult = await Promise.race([
  this.page.waitForSelector('div#abc'),
  this.page.waitForSelector('div#efg'),
]);

But the accepted solution is simpler for this use case.

Simply use playwright native Locator OR:

await this.page.waitForSelector(locatorA.or(locatorB))

Reference: https://stackoverflow.com/a/77288539/1831456