How can I use page.waitForSelector in Playwright for one of two selectors?

Question

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?

score 4 · Accepted Answer · answered Mar 24 '22 at 03:48

4

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');

answered Mar 24 '22 at 03:48

Patrick Kenny

score 2 · Answer 2 · answered Nov 26 '22 at 16:52

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.

2 Answers2