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

Answer

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.