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

General Discussions
,
1

I want to await a <div> that could have either id="abc" or id="efg". Currently, I can wait for one selector like this:

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

But how can I modify it so that the step passes if either div#abc or div#efg appears on the page?

2

Playwright supports standard CSS selectors, and a comma acts like a logical OR.

You can do:

await page.waitForSelector('div#abc, div#efg', { timeout: 5000 });

This will resolve as soon as either div#abc or div#efg appears. It’s usually the simplest solution.

3

You can create a locator that matches both and pick the first visible element:

const locator = page.locator('div#abc, div#efg').first();
await locator.waitFor({ state: 'visible', timeout: 5000 });
console.log('Text:', await locator.textContent());

This approach also works well if you later want to interact with the element directly after it appears.

4

If you want to explicitly wait for either selector and maybe act differently depending on which one appears:

const result = await Promise.race([
    page.waitForSelector('div#abc', { timeout: 5000 }),
    page.waitForSelector('div#efg', { timeout: 5000 })
]);
console.log('Found element:', await result.textContent());

This waits for whichever appears first and returns the corresponding element.