Using Playwright waitForSelector with Multiple Possible IDs

Can I use the playwright waitforselector for one of two selectors, my problem is

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:


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

1 Like

Hi apksha,

In Playwright, you can use standard CSS selectors to wait for either of two elements to appear on the page. If you’re looking to wait for div#abc or div#efg, you can simply use a comma to separate the selectors, like so:

// Wait for either div#abc or div#efg to be present

await'div#abc, div#efg');

This method is quite straightforward and treats the selectors as an OR condition, meaning the command will proceed as soon as either of the specified elements is detected.

That’s a neat trick with the comma separating the selectors! It’s really handy for simple conditions where you’re waiting on one element or another. It keeps the code clean and readable, which is always a plus in automated testing scripts.

1 Like

Interesting point about the | operator! It’s good to have options. I find that different projects and teams might have preferences for one syntax over another. It’s great that the Playwright is flexible enough to accommodate these preferences.

Playwright for handling a situation where you need to wait for one of two selectors is to utilize the | (pipe) operator, which acts as a logical OR condition in CSS selectors. Here’s how you could adjust your code to incorporate this:

// Wait for either div#abc or div#efg to be present

await'div#abc | div#efg');

This alternative might look a bit cleaner and more intuitive, especially if you’re coming from a background in CSS or similar syntaxes. It’s all about choosing the style that you find most readable and maintainable for your project.

1 Like

Diving a bit deeper, an alternative approach in Playwright is to leverage the page.waitForFunction method. This method allows you to wait for a custom JavaScript function to return true. Here’s how you can apply it to wait for either div#abc or div#efg:

// Wait for either div#abc or div#efg to be present

await => {

return document.querySelector('div#abc') || document.querySelector('div#efg');


This approach gives you the flexibility to implement more complex logic than what’s possible with simple CSS selectors. It’s particularly useful when dealing with dynamic content or when you need to check for more than just the presence of an element.