How do I manage authentication popups in Playwright?

Answer

To manage authentication popups in Playwright, you can use the page.waitForEvent('popup') method. This method waits for a new popup window to appear and returns a promise that resolves with a Page object representing the popup. You can then interact with the popup just like any other page.

Here's an example:

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

test('authenticate', async ({ page }) => {
  // Click on a button that opens the authentication popup
  await page.click('#auth-button');

  // Wait for the popup to appear
  const authPopup = await page.waitForEvent('popup');

  // Authenticate in the popup
  await authPopup.fill('#username', 'my-username');
  await authPopup.fill('#password', 'my-password');
  await authPopup.click('#login-button');

  // Wait for the main window to regain focus
  await page.bringToFront();
});

In this example, you first click on a button that opens an authentication popup. Then, you wait for the popup event to fire, indicating that a new window has been opened. You store this new Page object in a variable called authPopup.

Next, you interact with the new page by filling out the username and password fields and clicking on the login button.

Finally, you call page.bringToFront() to switch back to the original window once authentication is complete. From here, you can continue interacting with your application as needed.

Using Playwright's built-in methods like waitForEvent('popup') makes it easy to handle complex scenarios like authenticating in separate windows or popups.