How do I handle conditional pop-up appearances in automation testing using Playwright?


Handling Conditional Pop-ups in Playwright

To handle uncertain pop-up appearances during automation testing with @playwright/test, you can use page.waitForSelector() with a timeout and catch the timeout error. This approach allows you to wait for the pop-up and continue the test if it doesn't appear within the specified time.

Here's an example of how to handle a conditional pop-up on https://ray.run:

import { test, expect } from '@playwright/test';

test('Handle uncertain pop-up', async ({ page }) => {
  await page.goto('https://ray.run');

  // Wait for the pop-up with a timeout
  try {
    await page.waitForSelector('.popup-selector', { timeout: 5000 });
    // If the pop-up appears, perform the desired action
    await page.click('.popup-close-button');
  } catch (error) {
    // If the pop-up doesn't appear within 5 seconds, continue the test
    if (error.name === 'TimeoutError') {
      console.log('Pop-up did not appear');

  // Continue with the rest of the test
  // ...

In this example, the test waits for the pop-up with the .popup-selector class for 5 seconds. If the pop-up appears, it clicks the close button with the .popup-close-button class. If the pop-up doesn't appear within the timeout, the test catches the TimeoutError and continues with the rest of the test.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.