Modern QA2026Multi-Tab and Pop-up Handling — tiles
Log inJoin
108 / 139 · 13 Browser Automation with Playwright · Visual Testing and Edge Cases← prev⊞ allnext →☰ Read as one page

12.5Multi-Tab and Pop-up Handling

test('external link opens in new tab', async ({ page, context }) => {
  await page.goto('/');

  // Wait for the new page (tab) to open
  const newPagePromise = context.waitForEvent('page');
  await page.getByRole('link', { name: 'Documentation' }).click();
  const newPage = await newPagePromise;

  await newPage.waitForLoadState();
  await expect(newPage).toHaveURL(/.*docs/);
  await expect(newPage).toHaveTitle(/Documentation/);
});

Dialog Handling

test('confirm dialog before delete', async ({ page }) => {
  // Set up dialog handler before triggering it
  page.on('dialog', async (dialog) => {
    expect(dialog.message()).toContain('Are you sure?');
    await dialog.accept();
  });

  await page.getByRole('button', { name: 'Delete Account' }).click();
  await expect(page.getByText('Account deleted')).toBeVisible();
});