Widget practice · Multi-context

Open new windows & tabs

Four triggers — anchor target="_blank", window.open(), multi-tab spawn, and a noopener variant. Practise context.waitForEvent('page'), Promise.all, and asserting against the second Page object.

① Anchor with `target="_blank"`

Standard cross-tab link. The browser opens a new tab pointing at ./tab-popup.html.

Open via target="_blank"

id=anchor-blank data-testid=open-anchor target=_blank · rel=noopener

② `window.open()` popup

Programmatic open via JS. Most browsers allow it inside a user-gesture handler.

id=open-popup · open-popup-named data-testid=open-popup · open-popup-named window.open(url, name, features)

③ Open three tabs at once

Fires three window.open() calls in a row. Use it to practise iterating context.pages().

data-testid=open-three asserts=context.pages().length === 4 (incl. main)

④ `noopener` variant — no `window.opener`

Secure flavour: the new tab cannot reach back to window.opener. Useful for verifying security headers in tests.

Open noopener

id=anchor-noopener rel=noopener noreferrer

No window event yet.

What students should practise

Capture a new page via Promise.all([context.waitForEvent('page'), click()]).
Assert the new Page's URL ends with tab-popup.html.
Switch focus & read data-testid="popup-heading" inside the popup.
Open 3 tabs, iterate context.pages() and close all but the main.
Confirm the noopener tab reports (no opener) on the popup page.

Playwright solutionPage handle + Promise.all + iterating context.pages() Show solution

import { Browser, BrowserContext, chromium, Page, expect } from '@playwright/test';

(async () => {
  const browser: Browser = await chromium.launch({ headless: false, channel: 'chrome' });
  const context: BrowserContext = await browser.newContext();
  const page: Page = await context.newPage();
  await page.goto('/playwright/widgets/windows-tabs.html');

  // 1) target=_blank — wait for new page event, click in parallel
  const [popup] = await Promise.all([
    context.waitForEvent('page'),
    page.getByTestId('open-anchor').click()
  ]);
  await popup.waitForLoadState();
  await expect(popup).toHaveURL(/tab-popup\.html$/);
  await expect(popup.getByTestId('popup-heading')).toContainText('Hello from the popup tab');

  // 2) window.open — identical capture pattern
  const [winPopup] = await Promise.all([
    context.waitForEvent('page'),
    page.getByTestId('open-popup').click()
  ]);
  await winPopup.close();

  // 3) three tabs at once — collect them all then iterate
  const waiters = [0, 1, 2].map(() => context.waitForEvent('page'));
  await page.getByTestId('open-three').click();
  const threePages = await Promise.all(waiters);
  expect(context.pages().length).toBeGreaterThanOrEqual(4);
  for (const p of threePages) await p.close();

  // 4) noopener — popup should report no opener
  const [secure] = await Promise.all([
    context.waitForEvent('page'),
    page.getByTestId('open-noopener').click()
  ]);
  await expect(secure.getByTestId('opener-url')).toContainText('(no opener)');
})();

Open new windows & tabs

① Anchor with target="_blank"

② window.open() popup

③ Open three tabs at once

④ noopener variant — no window.opener

① Anchor with `target="_blank"`

② `window.open()` popup

④ `noopener` variant — no `window.opener`