Navigation

New Tab

Advanced

Open the destination in a new tab; assert against popup.

Open destination ↗

Live widget · interact freely

Manual test goal

Click a link that opens a new tab and assert against the content of the popup page.

Expected result

The popup loads /practice/new-tab/destination and exposes a recognizable heading.

Stable selectors

External link[data-testid="tab-link"]

Reference Playwright spec

new-tab.spec.ts

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

test('open external link in new tab', async ({ page, context }) => {
  await page.goto('https://lab.hakdogan.com/practice/new-tab');

  const popupPromise = context.waitForEvent('page');
  await page.getByTestId('tab-link').click();
  const popup = await popupPromise;

  await popup.waitForLoadState('domcontentloaded');
  await expect(popup.getByRole('heading', { name: /destination/i })).toBeVisible();
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idlenew-tab.spec.ts

https://lab.hakdogan.com/practice/new-tab

# console output will stream here