How do you handle Multiple Tabs?

The Answer

Each browser tab is a `Page` object within a `BrowserContext`. Playwright uses the `context.waitForEvent('page')` pattern combined with `Promise.all()` to reliably capture new tabs opened by link clicks.

Deep Dive Explanation

The race condition trap: if you start waiting AFTER the click, the 'page' event may have already fired and been missed. Promise.all() prevents this by starting both the event listener and the click simultaneously.

example.spec.ts

test('handle new tab', async ({ context, page }) => {
  await page.goto('https://app.com');

  // Promise.all ensures listener is registered BEFORE the click
  const [newTab] = await Promise.all([
    context.waitForEvent('page'),                          // Wait for new tab
    page.getByRole('link', { name: 'Open Preview' }).click() // Triggers it
  ]);

  await newTab.waitForLoadState('domcontentloaded');

  // Now interact with BOTH tabs
  await expect(newTab).toHaveTitle('Preview - App');
  await expect(page).toHaveURL('https://app.com'); // Original still active
  await newTab.close();
});